import { Card, List, Typography } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import DataLabel from "../data-label/data-label.component";
import TechClockOffButton from "../tech-job-clock-out-button/tech-job-clock-out-button.component";
import TechJobPrintTickets from "../tech-job-print-tickets/tech-job-print-tickets.component";

export default function TimeTicketShiftActive({
  timetickets,
  refetch,
  isTechConsole,
}) {
  const { t } = useTranslation();

  return (
    <div>
      {timetickets.length > 0 ? (
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            flexDirection: "column",
            height: "100%",
          }}
        >
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <Typography.Title level={2}>
              {t("timetickets.labels.shiftalreadyclockedon")}
            </Typography.Title>
            {isTechConsole ? (
              <TechJobPrintTickets attendacePrint={true} />
            ) : null}
          </div>
          <div style={{ flexGrow: 1 }}>
            <List
              grid={{
                gutter: 32,
                xs: 1,
                sm: 2,
                md: 3,
                lg: 4,
                xl: 5,
                xxl: 6,
              }}
              dataSource={timetickets || []}
              renderItem={(ticket) => (
                <List.Item>
                  <Card
                    title={t(ticket.memo)}
                    actions={[
                      <TechClockOffButton
                        jobId={ticket.jobid}
                        timeTicketId={ticket.id}
                        completedCallback={refetch}
                        isShiftTicket
                      />,
                    ]}
                  >
                    <DataLabel label={t("timetickets.fields.clockon")}>
                      <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
                    </DataLabel>
                  </Card>
                </List.Item>
              )}
            ></List>
          </div>
        </div>
      ) : null}
    </div>
  );
}