"use client";

import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import TransferList from "../TransferList";
import Button from "@mui/material/Button";
import React, { useMemo } from "react";
import CardActions from "@mui/material/CardActions";
import RestartAlt from "@mui/icons-material/RestartAlt";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import InputLabel from "@mui/material/InputLabel";
import { Task } from "@/app/api/tasks";
import { useFormContext } from "react-hook-form";
import { CreateProjectInputs } from "@/app/api/projects/actions";

interface Props {
  allTasks: Task[];
  isActive: boolean;
}

const TaskSetup: React.FC<Props> = ({ allTasks: tasks, isActive }) => {
  const { t } = useTranslation();
  const { getValues, setValue } = useFormContext<CreateProjectInputs>();
  const currentTasks = getValues("tasks");

  const items = useMemo(
    () => tasks.map((t) => ({ id: t.id, label: t.name, group: t.taskGroup })),
    [tasks],
  );
  const selectedItems = useMemo(() => {
    return tasks
      .filter((t) => currentTasks[t.id])
      .map((t) => ({ id: t.id, label: t.name, group: t.taskGroup }));
  }, [currentTasks, tasks]);

  return (
    <Card sx={{ display: isActive ? "block" : "none" }}>
      <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
        <Typography variant="overline" display="block" marginBlockEnd={1}>
          {t("Task List Setup")}
        </Typography>
        <Grid
          container
          spacing={2}
          columns={{ xs: 6, sm: 12 }}
          marginBlockEnd={1}
        >
          <Grid item xs={6}>
            <FormControl fullWidth>
              <InputLabel>{t("Task List Source")}</InputLabel>
              <Select
                label={t("Task List Source")}
                value={"M1009 - Consultancy Project X Temp"}
              >
                <MenuItem value={"M1009 - Consultancy Project X Temp"}>
                  {"M1009 - Consultancy Project X Temp"}
                </MenuItem>
              </Select>
            </FormControl>
          </Grid>
        </Grid>
        <TransferList
          allItems={items}
          initiallySelectedItems={selectedItems}
          onChange={(selectedTasks) => {
            const newTasks = selectedTasks.reduce<CreateProjectInputs["tasks"]>(
              (acc, item) => {
                // Reuse the task from currentTasks if present
                return {
                  ...acc,
                  [item.id]: currentTasks[item.id] ?? { manhourAllocation: {} },
                };
              },
              {},
            );

            setValue("tasks", newTasks);
          }}
          allItemsLabel={t("Task Pool")}
          selectedItemsLabel={t("Project Task List")}
        />
        <CardActions sx={{ justifyContent: "flex-end" }}>
          <Button variant="text" startIcon={<RestartAlt />}>
            {t("Reset")}
          </Button>
        </CardActions>
      </CardContent>
    </Card>
  );
};

export default TaskSetup;
