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";

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

  return (
    <div>
      {timetickets.length > 0 ? (
        <div>
          <Typography.Title level={2}>
            {t("timetickets.labels.shiftalreadyclockedon")}
          </Typography.Title>
          <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>
      ) : null}
    </div>
  );
}