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

type ItemsSelectionViewProps = {
  items: MinifiedData[] | [];
  fieldsItems: MinifiedData[] | [];
  selectedItemId?: string | null;
  setSelectedQuestion: (value: string | null) => void;
  selectedField?: string | null;
  setSelectedField: (value: string | null) => void;
  handleScroll: () => void;
  activeScope: TagKeys;
  FieldsAllowedFC: MinifiedData[];
  selectedCurrentFields: MinifiedData[];
  setIsCurrentFields: (a:boolean) => void;
  isCurrentFields: boolean
}
export const EntitiesQuestions: FC<ItemsSelectionViewProps> = ({
  items,
  fieldsItems,
  selectedItemId,
  setSelectedQuestion,
  selectedField,
  setSelectedField,
  handleScroll,
  activeScope,
  FieldsAllowedFC,
  selectedCurrentFields,
  setIsCurrentFields,
  isCurrentFields,
}) => {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(600));

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      <Box
        sx={{
          marginTop: "20px",
          flexGrow: 1,
          width: "100%",
          height: "346px",
          overflow: "auto"
        }}
      >
        <Box>
          <Button
            onClick={() => setIsCurrentFields(old => !old)}
            sx={{
              width: isMobile ? "146px" : "auto",
              borderRadius: "50px",
              p: isMobile ? "8px 20px" : "10px 30px",
              mr: "10px",
              fontSize: "16px",
              border: isCurrentFields ? "1px solid #7E2AEA" : "",
              bgcolor: isCurrentFields ? "#7E2AEA1A" : "#F2F3F7",
              color: isCurrentFields ? "#7E2AEA" : "",
            }}
          >Ваши готовые поля</Button>
          <Button
            onClick={() => setIsCurrentFields(old => !old)}
            sx={{
              width: isMobile ? "140px" : "auto",
              borderRadius: "50px",
              p: isMobile ? "8px 20px" : "10px 30px",
              fontSize: "16px",
              mt: isMobile ? "10px" : "0",
              border: !isCurrentFields ? "1px solid #7E2AEA" : "",
              bgcolor: !isCurrentFields ? "#7E2AEA1A" : "#F2F3F7",
              color: !isCurrentFields ? "#7E2AEA" : "",
            }}
          >Новые поля +</Button>
        </Box>
        {
          isCurrentFields ?
            <CurrentFields
              items={activeScope === "Contact" ? diffArr([...FieldsAllowedFC, ...items], selectedCurrentFields) : items}
              fieldsItems={fieldsItems.filter(e => e.entity === activeScope)}
              currentField={selectedField}
              currentQuestion={selectedItemId}
              setCurrentField={setSelectedField}
              setCurrentQuestion={setSelectedQuestion}
              handleScroll={handleScroll}
            />
            :
            <NewFields
              items={items}
              currentQuestion={selectedItemId}
              setCurrentQuestion={setSelectedQuestion}
            />
        }
      </Box>
    </Box>
  )
}