import { GET_JOB_BY_PK } from "@/graphql/jobs.queries";
import { useQuery } from "@apollo/client";
import { useLocalSearchParams } from "expo-router";
import React from "react";
import { useTranslation } from "react-i18next";
import {
  RefreshControl,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { ActivityIndicator, Card, useTheme } from "react-native-paper";
import DataLabelComponent from "../data-label/data-label";

export default function JobTombstone() {
  const { jobId } = useLocalSearchParams();
  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
    variables: {
      id: jobId,
    },
    skip: !jobId,
  });

  const theme = useTheme();
  console.log("*** ~ JobTombstone ~ theme:", theme.colors);

  const { t } = useTranslation();
  const onRefresh = async () => {
    return refetch();
  };
  if (loading) {
    return <ActivityIndicator />;
  }
  if (!data.jobs_by_pk) {
    return (
      <Card>
        <Text>Job is not defined.</Text>
      </Card>
    );
  }
  const job = data.jobs_by_pk;
  return (
    <ScrollView
      contentContainerStyle={{
        rowGap: 16,
        padding: 10,
      }}
      refreshControl={
        <RefreshControl refreshing={loading} onRefresh={onRefresh} />
      }
    >
      <Card>
        <Card.Title
          title={t("jobdetail.labels.jobinfo")}
          titleVariant="titleLarge"
        />
        <Card.Content>
          <Text>{job.status}</Text>
          {job.inproduction && (
            <Text>{t("objects.jobs.labels.inproduction")}</Text>
          )}
          {job.inproduction &&
            job.production_vars &&
            !!job.production_vars.note && (
              <Text>{job.production_vars.note}</Text>
            )}
        </Card.Content>
      </Card>

      <Card>
        <Card.Title
          title={t("jobdetail.labels.claiminformation")}
          titleVariant="titleLarge"
        />
        <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")}
          titleVariant="titleLarge"
        />
        <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")}
          titleVariant="titleLarge"
        />
        <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>
    </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",
  },
});