import { GET_JOB_BY_PK } from "@/graphql/jobs.queries";
import { useQuery } from "@apollo/client";
import { useGlobalSearchParams } from "expo-router";
import React from "react";
import { useTranslation } from "react-i18next";
import { ScrollView } from "react-native";
import { ActivityIndicator, DataTable } from "react-native-paper";
import ErrorDisplay from "../error/error-display";

export default function JobLines() {
  const { jobId } = useGlobalSearchParams();

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

  const { t } = useTranslation();
  const onRefresh = async () => {
    return refetch();
  };

  if (loading) {
    return <ActivityIndicator size="large" style={{ flex: 1 }} />;
  }

  if (error) {
    return <ErrorDisplay message={JSON.stringify(error)} />;
  }

  if (!data?.jobs_by_pk) {
    return <ErrorDisplay message={"Job is not defined."} />;
  }

  const job = data.jobs_by_pk;
  return (
    <ScrollView>
      <DataTable>
        <DataTable.Header>
          <DataTable.Title> {t("jobdetail.labels.lines_desc")}</DataTable.Title>
          <DataTable.Title>
            {t("jobdetail.labels.lines_lbr_ty")}
          </DataTable.Title>
          <DataTable.Title numeric>
            {t("jobdetail.labels.lines_lb_hrs")}
          </DataTable.Title>
          <DataTable.Title>
            {t("jobdetail.labels.lines_part_type")}
          </DataTable.Title>
          <DataTable.Title numeric>
            {t("jobdetail.labels.lines_qty")}
          </DataTable.Title>
        </DataTable.Header>

        {job.joblines.map((item) => (
          <DataTable.Row key={item.id}>
            <DataTable.Cell style={{ flex: 4 }}>
              {item.line_desc}
            </DataTable.Cell>
            <DataTable.Cell>
              {item.mod_lbr_ty && t(`jobdetail.lbr_types.${item.mod_lbr_ty}`)}
            </DataTable.Cell>
            <DataTable.Cell numeric>{item.mod_lb_hrs}</DataTable.Cell>
            <DataTable.Cell>
              {item.part_type && t(`jobdetail.part_types.${item.part_type}`)}
            </DataTable.Cell>
            <DataTable.Cell numeric>{item.part_qty}</DataTable.Cell>
          </DataTable.Row>
        ))}
      </DataTable>
    </ScrollView>
  );
}
