import { useQuery } from "@apollo/client";
import { Tab, Tabs } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { Text } from "react-native";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import ErrorDisplay from "../error-display/error-display.component";
import JobTombstone from "../job-tombstone/job-tombstone.component";
import LoadingDisplay from "../loading-display/loading-display.component";
import JobNotes from "../job-notes/job-notes.component";
import JobDocuments from "../job-documents/job-documents.component";
import JobLines from "../job-lines/job-lines.component";

export default function ScreenJobDetail({ navigation, route, ...restProps }) {
  const {
    params: { jobId },
  } = route;
  const { t } = useTranslation();

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

  if (loading) return <LoadingDisplay />;
  if (error) return <ErrorDisplay errorMessage={error.message} />;

  return (
    <Tabs>
      <Tab heading={t("jobdetail.labels.job")}>
        <JobTombstone
          job={data.jobs_by_pk}
          loading={loading}
          refetch={refetch}
        />
      </Tab>
      <Tab heading={t("jobdetail.labels.lines")}>
        <JobLines job={data.jobs_by_pk} loading={loading} refetch={refetch} />
      </Tab>
      <Tab heading={t("jobdetail.labels.documents")}>
        <JobDocuments
          job={data.jobs_by_pk}
          loading={loading}
          refetch={refetch}
        />
      </Tab>
      <Tab heading={t("jobdetail.labels.notes")}>
        <JobNotes job={data.jobs_by_pk} loading={loading} refetch={refetch} />
      </Tab>
    </Tabs>
  );
}