import {
  Card,
  CardItem,
  Container,
  Content,
  Form,
  H2,
  H3,
  Text,
} from "native-base";
import React from "react";
import { RefreshControl, StyleSheet } from "react-native";
import DataLabelComponent from "../data-label/data-label.component";
import { useTranslation } from "react-i18next";

export default function JobTombstone({ job, loading, refetch }) {
  const { t } = useTranslation();
  if (!!!job) {
    <Card>
      <Text>Job is not defined.</Text>
    </Card>;
  }
  const onRefresh = async () => {
    return refetch();
  };

  return (
    <Container>
      <Content
        padder
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
        }
      >
        <Card>
          <CardItem bordered style={localStyles.status}>
            <H2>{job.status}</H2>
          </CardItem>
          {job.inproduction && (
            <CardItem bordered style={localStyles.inproduction}>
              <Text>{t("objects.jobs.labels.inproduction")}</Text>
            </CardItem>
          )}
          {job.inproduction && job.production_vars && job.production_vars.note && (
            <CardItem bordered style={localStyles.inproduction}>
              <Text>{job.production_vars.note}</Text>
            </CardItem>
          )}
        </Card>
        <Card>
          <CardItem bordered style={localStyles.status}>
            <H3>{t("jobdetail.labels.claiminformation")}</H3>
          </CardItem>
          <Form>
            <DataLabelComponent
              label={t("objects.jobs.fields.owner")}
              content={`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
                job.ownr_co_nm || ""
              }`}
            />
            <DataLabelComponent
              label={t("objects.jobs.fields.vehicle")}
              content={`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
                job.v_model_desc || ""
              }`}
            />
            <DataLabelComponent
              label={t("objects.jobs.fields.ins_co_nm")}
              content={job.ins_co_nm}
            />
            <DataLabelComponent
              label={t("objects.jobs.fields.clm_no")}
              content={job.clm_no}
            />
          </Form>
        </Card>
        <Card>
          <CardItem bordered style={localStyles.status}>
            <H3>{t("jobdetail.labels.employeeassignments")}</H3>
          </CardItem>
          <Form>
            <DataLabelComponent
              label={t("objects.jobs.fields.employee_body")}
              content={`${
                (job.employee_body_rel && job.employee_body_rel.first_name) ||
                ""
              } ${
                (job.employee_body_rel && job.employee_body_rel.last_name) || ""
              }`}
            />
            <DataLabelComponent
              label={t("objects.jobs.fields.employee_prep")}
              content={`${
                (job.employee_prep_rel && job.employee_prep_rel.first_name) ||
                ""
              } ${
                (job.employee_prep_rel && job.employee_prep_rel.last_name) || ""
              }`}
            />
            <DataLabelComponent
              label={t("objects.jobs.fields.employee_refinish")}
              content={`${
                (job.employee_refinish_rel &&
                  job.employee_refinish_rel.first_name) ||
                ""
              } ${
                (job.employee_refinish_rel &&
                  job.employee_refinish_rel.last_name) ||
                ""
              }`}
            />
          </Form>
        </Card>
        <Card style={localStyles.twoColumnCard}>
          <Form style={localStyles.twoColumnCardColumn}>
            <DataLabelComponent
              label={t("objects.jobs.fields.scheduled_in")}
              content={job.scheduled_in}
              dateTime
            />
            <DataLabelComponent
              label={t("objects.jobs.fields.actual_in")}
              content={job.actual_in}
              dateTime
            />
          </Form>
          <Form style={localStyles.twoColumnCardColumn}>
            <DataLabelComponent
              label={t("objects.jobs.fields.scheduled_completion")}
              content={job.scheduled_completion}
              dateTime
            />
            <DataLabelComponent
              label={t("objects.jobs.fields.scheduled_delivery")}
              content={job.scheduled_delivery}
              dateTime
            />
          </Form>
        </Card>
      </Content>
    </Container>
  );
}

const localStyles = StyleSheet.create({
  twoColumnCard: { display: "flex", flexDirection: "row" },
  twoColumnCardColumn: { flex: 1 },
  status: {
    textAlign: "center",
    flexDirection: "row",
    justifyContent: "center",
  },
  inproduction: {
    backgroundColor: "tomato",
    textAlign: "center",
    flexDirection: "row",
    justifyContent: "center",
  },
});

// <Card>

//   <CardItem bordered style={localStyles.ins_card}>
//     <View style={{ flex: 3, marginright: 10 }}>
//       <Text numberOfLines={1}>{job.ins_co_nm || ""}</Text>
//       <Text numberOfLines={1}>{job.clm_no || ""}</Text>
//     </View>
//     <View style={{ flex: 1, marginLeft: 10 }}>
//       <Text numberOfLines={1}>{job.ded_status || ""}</Text>
//       <Text numberOfLines={1}>
//         {Dinero({ amount: (job.ded_amt || 0) * 100 }).toFormat()}
//       </Text>
//     </View>
//   </CardItem>
//   <CardItem bordered style={localStyles.owner_card}>
//     <View style={{ flex: 1 }}>
//       <Text numberOfLines={1}>{`${job.ownr_fn || ""} ${job.ownr_ln || ""}${
//         job.ownr_co_nm || ""
//       }`}</Text>
//       <Text>{job.ownr_ph1 || ""}</Text>
//     </View>
//     <View style={{ flex: 1 }}>
//       <Text numberOfLines={2}>{`${job.v_model_yr || ""} ${
//         job.v_make_desc || ""
//       } ${job.v_model_desc || ""} ${job.v_vin || ""}`}</Text>
//     </View>
//   </CardItem>
//   <CardItem></CardItem>
// </Card>;