// 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_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig";
// import { BUTTON_EVENT_HANDLER_CONFIG } from "@/widgetLibrary/ButtonWidget/eventHandlerConfig"
// import { generatorEventHandlerConfig } from "@/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig"

const baseWidgetName = "button";
export const BUTTON_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",
    // i18n.t("editor.inspect.setter_group.interaction"),
    children: [
        {
          ...generatorEventHandlerConfig(
            baseWidgetName,
            BUTTON_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}-layout`,
  //   groupName:i18n.t("editor.inspect.setter_group.layout"),
  //   children: [
  //     {
  //       id: `${baseWidgetName}-layout-hidden`,
  //       setterType: "DYNAMIC_SWITCH_SETTER",
  //       openDynamic: true,
  //       labelName: i18n.t("editor.inspect.setter_label.hidden"),
  //       labelDesc:  i18n.t("editor.inspect.setter_tooltip.hidden"),
  //       useCustomLayout: true,
  //       attrName: "hidden",
  //       expectedType: VALIDATION_TYPES.BOOLEAN,
  //     },
  //   ],
  // },
  {
    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",
      //     },
      //   ],
      // },
      {
        id: `${baseWidgetName}-style-list`,
        setterType: "STYLE_CONTAINER_SETTER",
        labelName: i18n.t("editor.inspect.setter_label.colors"),
        attrName: "styles",
        useCustomLayout: true,
        childrenSetter: [
          {
            id: `${baseWidgetName}-style-bg`,
            labelName:  i18n.t("editor.inspect.setter_label.theme_color"),
            setterType: "COLOR_PICKER_SETTER",
            useCustomLayout: true,
            attrName: "colorScheme",
            defaultValue: "blue",
          },
        ],
      },
    ],
  },
];
