/* eslint-disable @typescript-eslint/no-explicit-any */
import RadioIcon from "@/assets/radius-icon.svg";
import i18n from "@/i18n/config";
// import { PanelConfig } from "@/page/app/components/InspectPanel/interface"
import { VALIDATION_TYPES } from "@/utils/validationFactory";
import { generatorEventHandlerConfig } from "../PublicSector/utils/generatorEventHandlerConfig";
import { CSSGrid_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig";
import { ScreenPayload } from "@/redux/config/configState";

const baseWidgetName = "GridCONTAINER_WIDGET";
export const CssGridPanelConfigBuilder = (
  currentScreen: ScreenPayload = "Desktop"
) => {
  const CSSDesktopGrid_PANEL_CONFIG: any[] = [
    {
      id: `${baseWidgetName}-basic`,
      groupName: i18n.t("editor.inspect.setter_group.basic"),
      children: [
        {
          id: `${baseWidgetName}-columnSize`,
          labelName: `Column Per Row`,
          attrName: `${currentScreen}.columnSize`,
          setterType: "INPUT_SETTER",
          // expectedType: VALIDATION_TYPES.STRING,
        },
        {
          id: `${baseWidgetName}-${currentScreen}-styles-columnFraction`,
          setterType: "ColumnFraction_INPUT_SETTER",
          labelName: "Column Fraction Ration (FR)",
          attrName: `${currentScreen}.columnFraction`,
          // expectedType: VALIDATION_TYPES.STRING,
          defaultValue: "1",
          useCustomLayout: true,
        },
        {
          id: `${baseWidgetName}-columnGap`,
          labelName: "Column Gap %",
          attrName: `${currentScreen}.columnGap`,
          setterType: "INPUT_HIERARCHY_SETTER",
          defaultValue: 1,
          expectedType: VALIDATION_TYPES.NUMBER,
        },
      ],
    },
    {
      id: `${baseWidgetName}-interaction`,
      groupName: i18n.t("editor.inspect.setter_group.interaction"),
      children: [
        {
          ...generatorEventHandlerConfig(
            baseWidgetName,
            CSSGrid_EVENT_HANDLER_CONFIG.events
          ),
        },
      ],
    },
    {
      id: `${baseWidgetName}-adornments`,
      groupName: i18n.t("editor.inspect.setter_group.adornments"),
      children: [
        {
          id: `${baseWidgetName}-adornments-tooltip`,
          labelName: i18n.t("editor.inspect.setter_label.tooltip"),
          labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"),
          attrName: "tooltipText",
          expectedType: VALIDATION_TYPES.STRING,
          setterType: "INPUT_SETTER",
        },
      ],
    },
    {
      id: `${baseWidgetName}-styles`,
      groupName: i18n.t("editor.inspect.setter_group.style"),
      children: [
        {
          id: `${baseWidgetName}-styles-border`,
          setterType: "BORDER_SETTER",
          useCustomLayout: true,
          attrName: "border",
        },
        {
          id: `${baseWidgetName}-styles-style`,
          setterType: "STYLE_CONTAINER_SETTER",
          labelName: i18n.t("editor.inspect.setter_label.style"),
          attrName: "style",
          useCustomLayout: true,
          childrenSetter: [
            {
              id: `${baseWidgetName}-style-radius`,
              labelName: i18n.t("editor.inspect.setter_label.radius"),
              attrName: "radius",
              setterType: "MEASURE_CHECK_INPUT_SETTER",
              useCustomLayout: true,
              icon: <RadioIcon />,
              defaultValue: "4px",
            },
            {
              id: `${baseWidgetName}-style-shadow`,
              labelName: i18n.t("editor.inspect.setter_label.shadow.shadow"),
              attrName: "shadow",
              setterType: "SHADOW_SELECT_SETTER",
              useCustomLayout: true,
              defaultValue: "small",
            },
          ],
        },
        {
          id: `${baseWidgetName}-styles-color`,
          setterType: "STYLE_CONTAINER_SETTER",
          labelName: i18n.t("editor.inspect.setter_label.color"),
          attrName: "style",
          useCustomLayout: true,
          childrenSetter: [
            {
              id: `${baseWidgetName}-style-background`,
              labelName: i18n.t("editor.inspect.setter_label.background"),
              attrName: "backgroundColor",
              setterType: "COLOR_PICKER_SETTER",
              useCustomLayout: true,
              defaultValue: "#ffffffff",
            },
          ],
        },
        {
          id: `${baseWidgetName}-styles-padding`,
          setterType: "PADDING_INPUT_SETTER",
          labelName: i18n.t("editor.inspect.setter_group.padding"),
          attrName: "padding",
          useCustomLayout: true,
        },
        {
          id: `${baseWidgetName}-validation-classesCondition`,
          labelName:"Style Class Condition",
          labelDesc: i18n.t("editor.inspect.setter_tooltip.form_data_key"),
          setterType: "INPUT_SETTER",
          expectedType: VALIDATION_TYPES.BOOLEAN,
          defaultValue:true,
          attrName: "isClassTrue",
        },
        {
          id: `${currentScreen}-${baseWidgetName}-style-classes`,
          labelName: "Select True CSS Classes  :",
          isSetterSingleRow:true,
          attrName: `${currentScreen}.trueClasses`,
          setterType: "BASE_MULTI_SELECT_SETTER",
          expectedType: VALIDATION_TYPES.ARRAY,
        },
        {
          id: `${currentScreen}-${baseWidgetName}-style-classes`,
          labelName: "Select false CSS Classes  :",
          isSetterSingleRow:true,
          attrName: `${currentScreen}.falseClasses`,
          setterType: "BASE_MULTI_SELECT_SETTER",
          expectedType: VALIDATION_TYPES.ARRAY,
        },
      ],
    },
  ];
  return CSSDesktopGrid_PANEL_CONFIG;
};
