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

type ItemsSelectionViewProps = {
  items: MinifiedData[] | [];
  fieldsItems: MinifiedData[] | [];
  selectedItemId?: string | null;
  setSelectedQuestion: (value: string | null) => void;
  selectedField?: string | null;
  setSelectedField: (value: string | null) => void;
  handleScroll?: () => void;
  onLargeBtnClick: () => void;
  onSmallBtnClick: () => void;
  activeScope: TagKeys;
  FieldsAllowedFC: MinifiedData[];
  setIsCurrentFields: (a:boolean) => void;
  isCurrentFields: boolean
}
export const EntitiesQuestions: FC<ItemsSelectionViewProps> = ({
  items,
  fieldsItems,
  selectedItemId,
  setSelectedQuestion,
  selectedField,
  setSelectedField,
  handleScroll,
  onLargeBtnClick,
  onSmallBtnClick,
  activeScope,
  FieldsAllowedFC,
  setIsCurrentFields,
  isCurrentFields,
}) => {

  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
              items={items}
              fieldsItems={[...FieldsAllowedFC, ...fieldsItems].filter(e => e.entity === activeScope)}
              currentField={selectedField}
              currentQuestion={selectedItemId}
              setCurrentField={setSelectedField}
              setCurrentQuestion={setSelectedQuestion}
            />
            :
            <NewFields
              items={items}
              currentQuestion={selectedItemId}
              setCurrentQuestion={setSelectedQuestion}
            />
        }
      </Box>
      <Box
        sx={{
          marginTop: "20px",
          alignSelf: "end",
        }}
      >
        <StepButtonsBlock
          onLargeBtnClick={() => {
            onLargeBtnClick()
          }}
          largeBtnText={"Добавить"}
          onSmallBtnClick={onSmallBtnClick}
          smallBtnText={"Отменить"}
        />
      </Box>
    </Box>
  )
}