import React from "react";
import { useTranslation } from "react-i18next";
import {
  RefreshControl,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { Card, Headline, Subheading } from "react-native-paper";
import DataLabelComponent from "../data-label/data-label.component";
import StyleRepeater from "../style-repeater/style-repeater";
import styles from "../styles";

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 (
    <ScrollView
      style={styles.cardBackground}
      refreshControl={
        <RefreshControl refreshing={loading} onRefresh={onRefresh} />
      }
    >
      <StyleRepeater childStyle={{ margin: 4 }}>
        <Card>
          <Card.Title title={t("jobdetail.labels.jobinfo")} />
          <Card.Content>
            <Headline>{job.status}</Headline>
            {job.inproduction && (
              <Subheading>{t("objects.jobs.labels.inproduction")}</Subheading>
            )}
            {job.inproduction &&
              job.production_vars &&
              !!job.production_vars.note && (
                <Subheading>{job.production_vars.note}</Subheading>
              )}
          </Card.Content>
        </Card>

        <Card>
          <Card.Title title={t("jobdetail.labels.claiminformation")} />
          <Card.Content style={localStyles.twoColumnCard}>
            <View style={localStyles.twoColumnCardColumn}>
              <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={
                  <View>
                    <Text>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
                      job.v_model_desc || ""
                    }`}</Text>
                    <Text>{job.v_vin}</Text>
                  </View>
                }
              />
            </View>
            <View style={localStyles.twoColumnCardColumn}>
              <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}
              />
            </View>
          </Card.Content>
        </Card>
        <Card>
          <Card.Title title={t("jobdetail.labels.employeeassignments")} />
          <Card.Content>
            <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) ||
                ""
              }`}
            />
            <DataLabelComponent
              label={t("objects.jobs.fields.employee_csr")}
              content={`${
                (job.employee_csr_rel && job.employee_csr_rel.first_name) || ""
              } ${
                (job.employee_csr_rel && job.employee_csr_rel.last_name) || ""
              }`}
            />
          </Card.Content>
        </Card>
        <Card>
          <Card.Title title={t("jobdetail.labels.dates")} />
          <Card.Content style={localStyles.twoColumnCard}>
            <View 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
              />
            </View>
            <View 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
              />
            </View>
          </Card.Content>
        </Card>
      </StyleRepeater>
    </ScrollView>
  );
}

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