import { Box, useTheme } from "@mui/material";
import { ItemForQuestions } from "../ItemForQuestions";
import { StepButtonsBlock } from "../../StepButtonsBlock";
import { FC } from "react";
import { MinifiedData, QuestionKeys, SelectedQuestions } from "../../types";

type TitleKeys = "Contact" | "Company" | "Lead" | "Customer";

type ItemDetailsViewProps = {
  items: MinifiedData[];
  setIsSelection: (value: boolean) => void;
  selectedQuestions: SelectedQuestions;
  setActiveScope: (value: QuestionKeys | null) => void;
  deleteHC: (id: string, scope: QuestionKeys) => void;
};

export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
  items,
  selectedQuestions,
  setIsSelection,
  setActiveScope,
  deleteHC,
}) => {
  const theme = useTheme();

  return (
    <Box
      sx={{
        marginTop: "20px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      <Box
        sx={{
          width: "100%",
          height: "400px",
          flexGrow: 1,
          borderRadius: "10px",
          padding: "10px",
          boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
          display: "flex",
          overflowY: "auto",
          flexWrap: "wrap",
          justifyContent: "start",
        }}
      >
        {selectedQuestions &&
          Object.keys(selectedQuestions).map((item) => (
            <ItemForQuestions
              key={item}
              title={item}
              onAddBtnClick={() => {
                setIsSelection(true);
                setActiveScope(item as QuestionKeys);
              }}
              items={items}
              data={selectedQuestions}
              deleteHC={deleteHC}
            />
          ))}
      </Box>

    </Box>
  );
};
