import { Card, List, Typography } from "antd";
import { useQuery } from "@apollo/client/react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";
import DataLabel from "../data-label/data-label.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import TechClockOffButton from "../tech-job-clock-out-button/tech-job-clock-out-button.component";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician
});
const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function TechClockedInList({ technician }) {
  const { loading, error, data, refetch } = useQuery(QUERY_ACTIVE_TIME_TICKETS, {
    variables: {
      employeeId: technician?.id
    },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
    skip: !technician
  });

  const { t } = useTranslation();
  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent title={error.message} type="error" />;

  return (
    <div>
      {data?.timetickets?.length > 0 ? (
        <div>
          <Typography.Title level={2}>{t("timetickets.labels.alreadyclockedon")}</Typography.Title>
          <List
            grid={{
              gutter: 32,
              xs: 1,
              sm: 2,
              md: 3,
              lg: 4,
              xl: 5,
              xxl: 6
            }}
            dataSource={data.timetickets || []}
            renderItem={(ticket) => (
              <List.Item>
                <Card
                  title={
                    <Link to={`/tech/joblookup?selected=${ticket.job.id}`}>
                      {`${ticket.job.ro_number || t("general.labels.na")} ${OwnerNameDisplayFunction(ticket.job)}`}
                    </Link>
                  }
                  actions={[
                    <TechClockOffButton
                      key="techCLockOffButton"
                      jobId={ticket.jobid}
                      timeTicketId={ticket.id}
                      completedCallback={refetch}
                    />
                  ]}
                >
                  <div>
                    {`
                  ${ticket.job.v_model_yr || ""} ${ticket.job.v_make_desc || ""} ${ticket.job.v_model_desc || ""}`}
                  </div>
                  <DataLabel label={t("timetickets.fields.clockon")}>
                    <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
                  </DataLabel>
                  <DataLabel label={t("timetickets.fields.cost_center")}>
                    {ticket.cost_center === "timetickets.labels.shift" ? t(ticket.cost_center) : ticket.cost_center}
                  </DataLabel>
                </Card>
              </List.Item>
            )}
          ></List>
        </div>
      ) : null}
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(TechClockedInList);
