import { Box, IconButton, Typography, useTheme } from "@mui/material";
import { FC } from "react";
import { IconBtnAdd } from "./Item/IconBtnAdd/IconBtnAdd";
import { AnswerItem } from "./Item/AnswerItem/AnswerItem";
import { QuestionKeys, SelectedQuestions, TagKeys, SelectedTags, MinifiedData } from "../types";

type ItemProps = {
  items: MinifiedData[];
  title: QuestionKeys | TagKeys;
  onAddBtnClick: () => void;
  data: MinifiedData[];
  deleteHC: (id: string, scope: QuestionKeys | TagKeys) => void;
};
export const ItemForQuestions: FC<ItemProps> = ({ items, title, onAddBtnClick, data, deleteHC }) => {
  const theme = useTheme();

  const titleDictionary = {
    Company: "Компания",
    Lead: "Сделка",
    Contact: "Контакты",
    Customer: "Покупатели",
  };

  const translatedTitle = titleDictionary[title];
  const selectedOptions = data[title];
  return (
    <Box
      sx={{
        width: "172px",
        display: "flex",
        flexDirection: "column",
        borderRight: `1px solid ${theme.palette.background.default}`,
      }}
    >
      <Box
        sx={{
          alignSelf: "center",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: "12px",
          backgroundColor: theme.palette.background.default,
          width: "156px",
          height: "40px",
        }}
      >
        <Typography sx={{ fontSize: "16px", fontWeight: 500 }}>{translatedTitle}</Typography>
      </Box>
      {selectedOptions &&
        selectedOptions.map((minifiedData, index) => (
          <AnswerItem
            key={minifiedData.id + index}
            fieldValue={"Значение поля"}
            fieldName={minifiedData.title}
            deleteHC={() => deleteHC(selectedOptions[index].id, title)}
          />
        ))}

      <IconBtnAdd onAddBtnClick={onAddBtnClick} />
    </Box>
  );
};
