/* eslint-disable @typescript-eslint/no-explicit-any */
import { DirectionPaddingSetterProps } from "@/page/App/components/PagePanel/Modules/Style/Components/DirectionPaddingSetter/interface";
import { getSelectedScreen } from "@/redux/config/configSelector";
import { ScreenPayload } from "@/redux/config/configState";
import { getComponentMap } from "@/redux/currentApp/executionTree/executionSelector";
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
} from "@mui/material";
// import _ from "lodash";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import React, { FC, useCallback, useMemo } from "react";
import { useSelector } from "react-redux";

import { get } from "lodash-es";

import _ from "lodash";

export const ColumnFractionSetter: FC<DirectionPaddingSetterProps> = (
  props: any
) => {
  const {
    handleUpdateDsl,
    componentNode,
    attrName,
    // expectedType,
    // defaultValue,
    labelName,
    widgetDisplayName,
  } = props;
  const componentsMap: any = useSelector(getComponentMap);
  const Screen: ScreenPayload = useSelector(getSelectedScreen);
  const length: number = useMemo(
    () =>
      Number(componentsMap[widgetDisplayName]?.props?.[Screen]?.columnSize) ||
      6,
    [Screen, widgetDisplayName, componentsMap]
  );
  const values = get(componentNode, `props.${attrName}`, ["auto"]);
  const changeHandler = useCallback(
    (value: string, index: number) => {
      const output = _.cloneDeep(values);
      output[index] = value || "";
      handleUpdateDsl(attrName, output);
    },
    [attrName, handleUpdateDsl, values]
  );
  return (
    <Box
      sx={{
        padding: "8px 16px",
        display: "flex",
        gap: 1,
        // overflow:"auto",
        alignItems: "center",
      }}
    >
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1-content"
          id="panel1-header"
        >
          {labelName}
        </AccordionSummary>
        <AccordionDetails>
          {new Array(length).fill(null).map((_, index) => (
            <React.Fragment key={index}>
              <FormControl
                fullWidth
                sx={{ margin: "5px", fontSize: "5px"

                }}
              >
                <InputLabel sx={{fontSize:"10px"}} id="demo-simple-select-label">{`Column - ${index+1}`}</InputLabel>
                <Select
                  labelId="demo-simple-select-label"
                  id="demo-simple-select"
                  value={values[index] || "1fr"}
                  size="small"
                  defaultValue={"1fr"}
                  sx={{fontSize:"10px"}}
                  label={`Column - ${index+1}`}
                  onChange={(e) => {
                    changeHandler(e.target.value, index);
                  }}
                >
                  {new Array((length*3)).fill(null).map((_, optionIndex) => {
                    return (
                      <MenuItem  sx={{fontSize:"10px"}} key={optionIndex} value={`${optionIndex+1}fr`}>
                        {`${optionIndex+1}fr`}
                      </MenuItem>
                    );
                  })}
                </Select>
              </FormControl>
              {/* <input
                key={"input" + index}
                defaultValue={"auto"}
                onChange={(e) => changeHandler(e.target.value, index)}
                value={values[index] || ""}
              ></input> */}
            </React.Fragment>
          ))}
        </AccordionDetails>
      </Accordion>
    </Box>
  );
};

export default ColumnFractionSetter;
