// import i18n from "@/i18n/config"
import i18n from "@/i18n/config";
import { PanelConfig } from "@/page/App/components/InspectPanel/interface";
// import { PanelConfig } from "@/page/App/components/InspectPanel/interface"
import { VALIDATION_TYPES } from "@/utils/validationFactory";
import { generatorEventHandlerConfig } from "../PublicSector/utils/generatorEventHandlerConfig";
import {  BUTTON_NATIVE_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig";
// import { BUTTON_EVENT_HANDLER_CONFIG } from "@/widgetLibrary/ButtonWidget/eventHandlerConfig"
// import { generatorEventHandlerConfig } from "@/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig"

export const IconHolderObj: string[] = [
  "plus",          
  "check",        
  "check-circle",  
  "close",         
  "content-copy",  
  "download",      
  "pencil",       
  "eye",           
  "earth",         
  "information",   
  "link",          
  "lock",          
  "email",         
  "menu",          
  "phone",         
  "play",          
  "magnify",       
  "cog",          
  "share-variant", 
  "star",          
  "trash-can"   
]
export const IconNameOptions: { label: string; value: string }[] =
  IconHolderObj.map((e) => {
    return { label: e, value: e };
  });
const baseWidgetName = "button";
export const BUTTON_NATIVE_PANEL_CONFIG: PanelConfig[] = [
  {
    id: `${baseWidgetName}-basic`,
    groupName: i18n.t("editor.inspect.setter_group.basic"),
    children: [
      {
        id: `${baseWidgetName}-basic-Text`,
        labelName: i18n.t("editor.inspect.setter_label.text"),
        attrName: "text",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.STRING,
      },
    ],
  },
  {
    id: `${baseWidgetName}-interaction`,
    groupName: "INTERACTION",
    children: [
      {
        ...generatorEventHandlerConfig(
          baseWidgetName,
          BUTTON_NATIVE_EVENT_HANDLER_CONFIG.events
        ),
      },
      {
        id: `${baseWidgetName}-interaction-formId`,
        labelName: i18n.t("editor.inspect.setter_label.submit_form"),
        labelDesc: "xxxxx",
        attrName: "formId",
        setterType: "INPUT_SETTER",
        bindAttrName: ["submit"],
        shown: (value) => value === true,
        // shown: (value) => {
        //   return !value;
        // },
      },
      {
        id: `${baseWidgetName}-interaction-loading`,
        labelName: "Loading",
        // i18n.t("editor.inspect.setter_label.loading"),
        labelDesc: "Whether the component should show a loading indicator.",
        // i18n.t("editor.inspect.setter_tooltip.loading"),
        attrName: "loading",
        placeholder: "{{false}}",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.BOOLEAN,
        bindAttrName: ["submit"],
        shown: (value) => {
          return !value;
        },
      },
      {
        id: `${baseWidgetName}-interaction-disabled`,
        labelName: "Disabled",
        //  i18n.t("editor.inspect.setter_label.disabled"),
        labelDesc:
          "Control the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.",
        // i18n.t("editor.inspect.setter_tooltip.disabled"),
        placeholder: "{{false}}",
        attrName: "disabled",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.BOOLEAN,
        bindAttrName: ["submit"],
        shown: (value) => !value,
      },
    ],
  },
  {
    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}-label-iconName`,
        labelName: "Icon",
        attrName: "iconName",
        expectedType: VALIDATION_TYPES.STRING,
        setterType: "SEARCH_SELECT_SETTER",
        options: IconNameOptions,
      },
      {
        id: `${baseWidgetName}-label-endIconName`,
        labelName: "IconPosition",
        attrName: "position",
        expectedType: VALIDATION_TYPES.STRING,
        setterType: "SEARCH_SELECT_SETTER",
        options: [{ label: "start", value: "start" },{ label: "end", value: "end" } ],
      },
    ],
  },
  {
    id: `${baseWidgetName}-style`,
    groupName: i18n.t("editor.inspect.setter_group.style"),
    children: [
      {
        id: `${baseWidgetName}-style-variant`,
        setterType: "RADIO_GROUP_SETTER",
        labelName: i18n.t("editor.inspect.setter_label.variant"),
        attrName: "variant",
        options: [
          {
            label: "Text",
            value: "text",
          },
          {
            label: "Contained",

            value: "contained",
          },
          {
            label: "outlined",
            value: "outlined",
          },
          {
            label: "elevated",
            value: "elevated",
          },
          {
            label: "contained-tonal",
            value: "contained-tonal",
          },
        ],
      },
      {
        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: `${baseWidgetName}-style-classes`,
        labelName: "Select True CSS Classes  :",
        isSetterSingleRow: true,
        attrName: "trueClasses",
        setterType: "BASE_MULTI_SELECT_SETTER",
        expectedType: VALIDATION_TYPES.ARRAY,
      },
      {
        id: `${baseWidgetName}-style-classes`,
        labelName: "Select false CSS Classes  :",
        isSetterSingleRow: true,
        attrName: "falseClasses",
        setterType: "BASE_MULTI_SELECT_SETTER",
        expectedType: VALIDATION_TYPES.ARRAY,
      },
    ],
  },
];
