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 { OTP_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig"

const baseWidgetName = "otp"
export const OTP_PANEL_CONFIG: PanelConfig[] = [
  {
    id: `${baseWidgetName}-basic`,
    groupName: i18n.t("editor.inspect.setter_group.basic"),
    children: [
      {
        id: `${baseWidgetName}-basic-type`,
        labelName: i18n.t("editor.inspect.setter_label.input.type"),
        labelDesc: i18n.t("editor.inspect.setter_tips.input.type"),
        attrName: "type",
        expectedType: VALIDATION_TYPES.STRING,
        setterType: "SEARCH_SELECT_SETTER",
        options: [
          {
            label: "Alphabet",
            value: "alphabet",
          },
          {
            label: "Number",
            value: "number",
          },
         
        ],
      },
      {
        id: `${baseWidgetName}-basic-length"`,
        labelName: "Length",
        labelDesc: "Length",
        attrName: "length",
        expectedType: VALIDATION_TYPES.NUMBER,
        setterType: "INPUT_SETTER",
        defaultValue:4
      },
      {
        id: `${baseWidgetName}-basic-separator`,
        labelName: "separator",
        labelDesc: "separator",
        attrName: "separator",
        expectedType: VALIDATION_TYPES.STRING,
        setterType: "INPUT_SETTER",
        defaultValue:"-"
      },
    ],
  },

  {
    id: `${baseWidgetName}-interaction`,
    groupName: i18n.t("editor.inspect.setter_group.interaction"),
    children: [
      {
        ...generatorEventHandlerConfig(
          baseWidgetName,
          OTP_EVENT_HANDLER_CONFIG.events,
        ),
      },
    ],
  },

  {
    id: `${baseWidgetName}-validation`,
    groupName: i18n.t("editor.inspect.setter_group.validation"),
    children: [
      {
        id: `${baseWidgetName}-validation-required`,
        labelName: i18n.t("editor.inspect.setter_label.required_field"),
        labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"),
        setterType: "SWITCH_SETTER",
        expectedType: VALIDATION_TYPES.BOOLEAN,
        attrName: "required",
      },
      {
        id: `${baseWidgetName}-validation-hide-message`,
        labelName: i18n.t(
          "editor.inspect.setter_label.hide_validation_message",
        ),
        labelDesc: i18n.t(
          "editor.inspect.setter_tooltip.hide_validation_message",
        ),
        setterType: "SWITCH_SETTER",
        expectedType: VALIDATION_TYPES.BOOLEAN,
        attrName: "hideValidationMessage",
      }
    ],
  },
  {
    id: `${baseWidgetName}-style`,
    groupName: i18n.t("editor.inspect.setter_group.style"),
    children: [
      {
        id: `${baseWidgetName}-style-boxHeight`,
        labelName: "Box height",
        labelDesc: "boxHeight",
        attrName: "boxHeight",
        expectedType: VALIDATION_TYPES.NUMBER,
        setterType: "INPUT_SETTER",
      },
      {
        id: `${baseWidgetName}-style-boxWidth`,
        labelName: "Box Width",
        labelDesc: "boxWidth",
        attrName: "boxWidth",
        expectedType: VALIDATION_TYPES.NUMBER,
        setterType: "INPUT_SETTER",
      },
      {
        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,
      },

    ],
  },
]
