import { useQuery } from "@apollo/react-hooks";
import { Button, Icon, PageHeader, Tag } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
//import JobDetailCardsHeaderComponent from "./job-detail-cards.header.component";
import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component";
import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.component";
import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
import "./job-detail-cards.styles.scss";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";

export default function JobDetailCards({ selectedJob }) {
  const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
    fetchPolicy: "network-only",
    variables: { id: selectedJob },
    skip: !selectedJob
  });
  const [noteModalVisible, setNoteModalVisible] = useState(false);
  const { t } = useTranslation();

  if (!selectedJob) {
    return <div>{t("jobs.errors.nojobselected")}</div>;
  }
  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
    <div className="job-cards-container">
      <NoteUpsertModal
        jobId={data.jobs_by_pk.id}
        visible={noteModalVisible}
        changeVisibility={setNoteModalVisible}
        refetch={refetch}
      />
      <PageHeader
        ghost={false}
        onBack={() => window.history.back()}
        tags={
          <span key="job-status">
            {data.jobs_by_pk.status ? (
              <Tag color="blue">{data.jobs_by_pk.status}</Tag>
            ) : null}
          </span>
        }
        title={
          loading ? (
            t("general.labels.loading")
          ) : (
            <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
              {data.jobs_by_pk.ro_number
                ? `${t("jobs.fields.ro_number")} ${data.jobs_by_pk.ro_number}`
                : `${t("jobs.fields.est_number")} ${
                    data.jobs_by_pk.est_number
                  }`}{" "}
            </Link>
          )
        }
        extra={[
          <Link
            key="documents"
            to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}
          >
            <Button>
              <Icon type="file-image" />
              {t("jobs.actions.addDocuments")}
            </Button>
          </Link>,
          <Button key="printing">
            <Icon type="printer" />
            {t("jobs.actions.printCenter")}
          </Button>,
          <Button
            key="notes"
            actiontype="addNote"
            onClick={() => {
              setNoteModalVisible(!noteModalVisible);
            }}
          >
            <Icon type="edit" />
            {t("jobs.actions.addNote")}
          </Button>,
          <Button key="postinvoices">
            <Icon type="shopping-cart" />
            {t("jobs.actions.postInvoices")}
          </Button>
        ]}
      >
        {
          //   loading ? (
          //   <LoadingSkeleton />
          // ) : (
          //   <Descriptions size='small' column={3}>
          //     <Descriptions.Item label='Created'>Lili Qu</Descriptions.Item>
          //     <Descriptions.Item label='Association'>421421</Descriptions.Item>
          //     <Descriptions.Item label='Creation Time'>
          //       2017-01-10
          //     </Descriptions.Item>
          //     <Descriptions.Item label='Effective Time'>
          //       2017-10-10
          //     </Descriptions.Item>
          //     <Descriptions.Item label='Remarks'>
          //       Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
          //     </Descriptions.Item>
          //   </Descriptions>
          // )
        }

        <section className="job-cards">
          <JobDetailCardsCustomerComponent
            loading={loading}
            data={data ? data.jobs_by_pk : null}
          />
          {
            //   <JobDetailCardsVehicleComponent
            //   loading={loading}
            //   data={data ? data.jobs_by_pk : null}
            // />
          }

          <JobDetailCardsInsuranceComponent
            loading={loading}
            data={data ? data.jobs_by_pk : null}
          />
          <JobDetailCardsDatesComponent
            loading={loading}
            data={data ? data.jobs_by_pk : null}
          />
          <JobDetailCardsPartsComponent
            loading={loading}
            data={data ? data.jobs_by_pk : null}
          />
          <JobDetailCardsNotesComponent
            loading={loading}
            data={data ? data.jobs_by_pk : null}
          />
          <JobDetailCardsDamageComponent
            loading={loading}
            data={data ? data.jobs_by_pk : null}
          />
          <JobDetailCardsDocumentsComponent
            loading={loading}
            data={data ? data.jobs_by_pk : null}
          />
          <JobDetailCardsTotalsComponent
            loading={loading}
            data={data ? data.jobs_by_pk : null}
          />
        </section>
      </PageHeader>
    </div>
  );
}