"use client";

import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import TransferList from "../TransferList";
import Button from "@mui/material/Button";
import Check from "@mui/icons-material/Check";
import Close from "@mui/icons-material/Close";
import { useRouter } from "next/navigation";
import React from "react";
import Stack from "@mui/material/Stack";

const CreateTaskTemplate = () => {
  const { t } = useTranslation();

  const router = useRouter();
  const handleCancel = () => {
    router.back();
  };

  return (
    <>
      <Card>
        <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
          <Typography variant="overline">{t("Task List Setup")}</Typography>
          <Grid
            container
            spacing={2}
            columns={{ xs: 6, sm: 12 }}
            marginBlockEnd={1}
          >
            <Grid item xs={6}>
              <TextField label={t("Task Template Code")} fullWidth />
            </Grid>
            <Grid item xs={6}>
              <TextField label={t("Task Template Name")} fullWidth />
            </Grid>
          </Grid>
          <TransferList
            allItems={[
              { id: "1", label: "Task 1: Super long task name that will overflow to the next line" },
              { id: "2", label: "Task 2" },
              { id: "3", label: "Task 3" },
              { id: "4", label: "Task 4" },
              { id: "5", label: "Task 5" },
              { id: "6", label: "Task 6" },
              { id: "7", label: "Task 7" },
              { id: "8", label: "Task 8" },
              { id: "9", label: "Task 9" },
            ]}
            initiallySelectedItems={[]}
            onChange={() => {}}
            allItemsLabel={t("Task Pool")}
            selectedItemsLabel={t("Task List Template")}
          />
        </CardContent>
      </Card>
      <Stack direction="row" justifyContent="flex-end" gap={1}>
        <Button variant="outlined" startIcon={<Close />} onClick={handleCancel}>
          {t("Cancel")}
        </Button>
        <Button variant="contained" startIcon={<Check />}>
          {t("Confirm")}
        </Button>
      </Stack>
    </>
  );
};

export default CreateTaskTemplate;