/* 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 { CONTAINER_EVENT_HANDLER_CONFIG } from "@/widgetLibrary/ContainerWidget/eventHandlerConfig"
// import { generatorEventHandlerConfig } from "@/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig"

const baseWidgetName = "Grid Container"
export const GridCONTAINER_PANEL_CONFIG: any[] = [
  {
    id: `${baseWidgetName}-views`,
    groupName: i18n.t("editor.inspect.setter_group.views"),
    children: [
      {
        id: `${baseWidgetName}-views-list`,
        labelName: i18n.t("editor.inspect.setter_label.data_source"),
        useCustomLayout: true,
        attrName: "viewList",
        setterType: "CONTAINER_VIEW_SETTER",
        childrenSetter: [
          {
            id: `${baseWidgetName}-viewList-key`,
            labelName: i18n.t("editor.inspect.setter_label.key"),
            attrName: "key",
            setterType: "INPUT_SETTER",
            expectedType: VALIDATION_TYPES.STRING,
          },
          {
            id: `${baseWidgetName}-viewList-label`,
            labelName: i18n.t("editor.inspect.setter_label.label"),
            attrName: "label",
            setterType: "INPUT_SETTER",
            expectedType: VALIDATION_TYPES.STRING,
          },
          {
            id: `${baseWidgetName}-viewList-extraSmallScreen`,
            labelName: "Extra Small Screen",
            labelDesc: "ExtraSmallScrenLayout",
            attrName: "xs",
            expectedType: VALIDATION_TYPES.NUMBER,
            setterType: "INPUT_SETTER",
          },
          {
            id: `${baseWidgetName}-viewList-SmallScreen`,
            labelName: "Small Screen",
            labelDesc: "SmallScrenLayout",
            attrName: "sm",
            expectedType: VALIDATION_TYPES.NUMBER,
            setterType: "INPUT_SETTER",
          },
          {
            id: `${baseWidgetName}-viewList-mediumScreen`,
            labelName: "Medium Screen",
            labelDesc: "MediumScrenLayout",
            attrName: "md",
            expectedType: VALIDATION_TYPES.NUMBER,
            setterType: "INPUT_SETTER",
          },
          {
            id: `${baseWidgetName}-viewList-LargeScreen`,
            labelName: "Large Screen",
            labelDesc: "LargeScrenLayout",
            attrName: "lg",
            expectedType: VALIDATION_TYPES.NUMBER,
            setterType: "INPUT_SETTER",
          },
         
        ],
      },
      {
        id: `${baseWidgetName}-views-default`,
        labelName:"Justify Content",
        attrName: "justifyContent",
        labelDesc: "justifyContent",
        expectedType: VALIDATION_TYPES.STRING,
        setterType: "INPUT_SETTER"
      },
      {
        id: `${baseWidgetName}-views-default`,
        labelName: i18n.t("editor.inspect.setter_label.default_views"),
        attrName: "defaultView",
        setterType: "CONTAINER_DEFAULT_VIEW_SETTER",
      },
    ],
  },
  {
    id: `${baseWidgetName}-interaction`,
    groupName: i18n.t("editor.inspect.setter_group.interaction"),
    children: [
      // {
      //   ...generatorEventHandlerConfig(
      //     baseWidgetName,
      //     CONTAINER_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}-layout`,
    groupName: i18n.t("editor.inspect.setter_group.layout"),
    children: [
     
      {
        id: `${baseWidgetName}-layout-height`,
        labelName: i18n.t("editor.inspect.setter_label.height"),
        attrName: "dynamicHeight",
        setterType: "HEIGHT_MODE_SELECT",
        options: [
          {
            label: i18n.t("editor.inspect.setter_option.fixed"),
            value: "fixed",
          },
          {
            label: i18n.t("editor.inspect.setter_option.auto_limited"),
            value: "limited",
          },
          {
            label: i18n.t("editor.inspect.setter_option.auto_height"),
            value: "auto",
          },
        ],
      },
      {
        id: `${baseWidgetName}-layout-hidden`,
        labelName: i18n.t("editor.inspect.setter_label.hidden"),
        labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"),
        attrName: "hidden",
        setterType: "DYNAMIC_SWITCH_SETTER",
        useCustomLayout: true,
        openDynamic: true,
      },
    ],
  },
  {
    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,
      },
    ],
  },
]
