import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { StepButtonsBlock } from "../../StepButtonsBlock";
import { FC } from "react";
import { Item } from "../../Questions/Item/Item";
import { MinifiedData, SelectedTags, TagKeys } from "../../types";

type TagsDetailsViewProps = {
  items: MinifiedData[];
  setIsSelection: (value: boolean) => void;
  setActiveScope: (value: TagKeys | null) => void;
  selectedTags: SelectedTags;
  deleteHC: (id: string, scope: TagKeys) => void;
};

export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
  items,
  setActiveScope,
  selectedTags,
  setIsSelection,
  deleteHC,
}) => {
  const theme = useTheme();

  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  return (
    <Box
      sx={{
        marginTop: "15px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      <Box
        sx={{
          width: "100%",
          maxHeight: "380px",
          flexGrow: 1,
          borderRadius: "10px",
          padding: "10px",
          boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
          display: "flex",
          flexDirection: isMobile ? "column" : "row",
        }}
      >
        <Box
          sx={{
            p: isMobile ? "0" : "0 40px",
            m: isMobile ? "5px auto 20px" : "0",
            borderRight: isMobile ? "none" : `1px solid ${theme.palette.background.default}`,
            height: isMobile ? "auto" : "100%",
            display: "flex",
            alignItems: "center",
          }}
        >
          <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>Результат</Typography>
        </Box>
        <Box
          sx={{
            width: "100%",
            flexGrow: 1,
            display: "flex",
            overflowY: "auto",
            flexWrap: "wrap",
            justifyContent: "start",
          }}
        >
          {selectedTags &&
            Object.keys(selectedTags).map((item) => (
              <Item
                key={item}
                items={items}
                title={item as TagKeys}
                onAddBtnClick={() => {
                  setIsSelection(true);
                  setActiveScope(item as TagKeys);
                }}
                data={selectedTags}
                deleteHC={deleteHC}
              />
            ))}
        </Box>
      </Box>
    </Box>
  );
};
