/* eslint-disable @typescript-eslint/no-explicit-any */
import { FC, useCallback } from "react";
import { CodeEditor } from "@/components/CodeEditor";
import {
  CODE_LANG,
  CODE_TYPE,
} from "@/components/CodeEditor/CodeMirror/extensions/interface";
import { BaseDynamicSelectSetterProps } from "@/page/App/components/InspectPanel/PanelSetters/SelectSetter/interface";

import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label";
import { MenuItem, Select } from "@mui/material";
import {
  basicDynamicSetterContainerStyle,
  dynamicSelectHeaderStyle,
  dynamicSelectSetterStyle,
} from "./style";
import { DynamicIcon } from "../PublicComponent/DynamicIcon";

const BaseDynamicSelect: FC<BaseDynamicSelectSetterProps> = (props) => {
  const {
    labelName,
    labelDesc,
    isDynamic,
    onClickFxButton,
    value,
    onChangeInput,
    onChangeSelect,
    expectedType,
    options,
    selectPlaceholder,
    inputPlaceholder,
    isError,
    // widgetType,
    // attrName,
    detailedDescription,
  } = props;

  const handleClickFxButton = useCallback(() => {
    onClickFxButton?.();
  }, [onClickFxButton]);

  const onChangeSelectInner = useCallback(
    (value: any) => {
      onChangeSelect(value);
    },
    [onChangeSelect]
  );

  return (
    <div css={basicDynamicSetterContainerStyle}>
      <div css={dynamicSelectHeaderStyle}>
        <PanelLabel labelName={labelName} labelDesc={labelDesc} />
        <DynamicIcon
          isDynamic={isDynamic}
          onClick={handleClickFxButton}
          hasRightContent={false}
        />
      </div>
      <div css={dynamicSelectSetterStyle}>
        {isDynamic ? (
          
          <CodeEditor
            value={value ?? ""}
            onChange={onChangeInput}
            showLineNumbers={false}
            placeholder={inputPlaceholder}
            expectValueType={expectedType}
            lang={CODE_LANG.JAVASCRIPT}
            maxHeight="208px"
            minHeight="30px"
            maxWidth="100%"
            codeType={CODE_TYPE.EXPRESSION}
            modalTitle={labelName}
            modalDescription={labelDesc ?? detailedDescription}
            scopeOfAutoComplete="page"
          />
        ) : (
          <Select
            sx={{ color: "techPurple" }}
            fullWidth
            size="small"
            aria-placeholder="Select a query"
            placeholder={selectPlaceholder}
            value={value}
            onChange={(e)=>onChangeSelectInner(e.target.value)}
            error={isError}
          >
            {options?.map((e) => {
              return (
                <MenuItem key={e.value} value={e.value}>
                  {e.label}
                </MenuItem>
              );
            })}
          </Select>
        )}
      </div>
    </div>
  );
};

BaseDynamicSelect.displayName = "BaseDynamicSelect";

export default BaseDynamicSelect;
