import { Box, Button } from "@mui/material"
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock"
import { FC, useState } from "react";
import { TagKeys } from "../types";
import { CurrentFields } from "./CurrentFields";
import { NewFields } from "./NewFields";

type MinifiedData = {
  id: string;
  title: string;
  subTitle?: string;
};
type ItemsSelectionViewProps = {
  items: MinifiedData[] | [];
  selectedItemId?: string | null;
  setSelectedItem: (value: string | null) => void;
  handleScroll?: () => void;
  onLargeBtnClick: () => void;
  onSmallBtnClick: () => void;
  activeScope: TagKeys;
};
export const EntitiesQuestions: FC<ItemsSelectionViewProps> = ({
  items,
  selectedItemId,
  setSelectedItem,
  handleScroll,
  onLargeBtnClick,
  onSmallBtnClick,
  activeScope,
}) => {


  const [isCurrentFields, setIsCurrentFields] = useState(true);

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      <Box
        sx={{
          marginTop: "20px",
          flexGrow: 1,
          width: "100%",
          height: "346px",
        }}
      >
        <Box>
          <Button
            onClick={() => setIsCurrentFields(old => !old)}
            sx={{
              borderRadius: "50px",
              p: "10px 30px",
              mr: "10px",

              border: isCurrentFields ? "1px solid #7E2AEA" : "",
              bgcolor: isCurrentFields ? "#7E2AEA1A" : "#F2F3F7",
              color: isCurrentFields ? "#7E2AEA" : "",
            }}
          >Ваши готовые поля</Button>
          <Button
            onClick={() => setIsCurrentFields(old => !old)}
            sx={{
              borderRadius: "50px",
              p: "10px 30px",

              border: !isCurrentFields ? "1px solid #7E2AEA" : "",
              bgcolor: !isCurrentFields ? "#7E2AEA1A" : "#F2F3F7",
              color: !isCurrentFields ? "#7E2AEA" : "",
            }}
          >Новые поля</Button>
        </Box>
        {
          isCurrentFields ?
            <CurrentFields />
            :
            <NewFields />
        }
      </Box>
      <Box
        sx={{
          marginTop: "20px",
          alignSelf: "end",
        }}
      >
        <StepButtonsBlock
          onLargeBtnClick={onLargeBtnClick}
          largeBtnText={"Добавить"}
          onSmallBtnClick={onSmallBtnClick}
          smallBtnText={"Отменить"}
        />
      </Box>
    </Box>
  )
}