import { Box, useTheme } from "@mui/material";
import { Item } from "../Item/Item";
import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
import { FC } from "react";
import { TQuestionEntity } from "../../IntegrationsModal";

type TitleKeys = "contacts" | "company" | "deal" | "users" | "buyers";

type ItemDetailsViewProps = {
  setIsSelection: (value: boolean) => void;
  handlePrevStep: () => void;
  handleNextStep: () => void;
  questionEntity: TQuestionEntity;
  setActiveItem: (value: string | null) => void;
};

export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
  handlePrevStep,
  handleNextStep,
  questionEntity,
  setActiveItem,
  setIsSelection,
}) => {
  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",
        }}
      >
        {questionEntity &&
          Object.keys(questionEntity).map((item) => (
            <Item
              key={item}
              title={item as TitleKeys}
              onAddBtnClick={() => {
                setIsSelection(true);
                setActiveItem(item);
              }}
              data={questionEntity}
            />
          ))}
      </Box>

      <Box
        sx={{
          marginTop: "20px",
          alignSelf: "end",
        }}
      >
        <StepButtonsBlock
          onSmallBtnClick={handlePrevStep}
          onLargeBtnClick={handleNextStep}
        />
      </Box>
    </Box>
  );
};