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

const baseWidgetName = "LabelNative"
export const LABEL_NATIVE_PANEL_CONFIG: PanelConfig[] = [
  {
    id: `${baseWidgetName}-basic`,
    groupName: i18n.t("editor.inspect.setter_group.basic"),
    children: [
      {
        id: `${baseWidgetName}-label-label`,
        labelName: i18n.t("editor.inspect.setter_label.label"),
        attrName: "label",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.STRING,
      },
    ],
  },
  {
    id: `${baseWidgetName}-style`,
    groupName: i18n.t("editor.inspect.setter_group.style"),
    children: [
      {
        id: `${baseWidgetName}-basic-type`,
        labelName: "Size",
        labelDesc: "Size",
        attrName: "size",
        expectedType: VALIDATION_TYPES.STRING,
        setterType: "SEARCH_SELECT_SETTER",
        options: [
          {
            label: "labelSmall",
            value: "labelSmall",
          },
          {
            label: "labelMedium",
            value: "labelMedium",
          },
          {
            label: "labelLarge",
            value: "labelLarge",
          }, {
            label: "bodySmall",
            value: "bodySmall",
          }, {
            label: "bodyMedium",
            value: "bodyMedium",
          }, {
            label: "bodyLarge",
            value: "bodyLarge",
          }, {
            label: "titleSmall",
            value: "titleSmall",
          }, {
            label: "titleMedium",
            value: "titleMedium",
          }, {
            label: "titleLarge",
            value: "titleLarge",
          },
          {
            label: "headlineSmall",
            value: "headlineSmall",
          },
          {
            label: "headlineMedium",
            value: "headlineMedium",
          },
          {
            label: "headlineLarge",
            value: "headlineLarge",
          },
          {
            label: "displaySmall",
            value: "displaySmall",
          },
          {
            label: "displayMedium",
            value: "displayMedium",
          },
          {
            label: "displayLarge",
            value: "displayLarge",
          }
        ],
      },
      // {
      //   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",
      //     },
      //   ],
      // },
      {
        id: `${baseWidgetName}-basic-type`,
        labelName: "Align",
        labelDesc: "Align",
        attrName: "align",
        expectedType: VALIDATION_TYPES.STRING,
        setterType: "SEARCH_SELECT_SETTER",
        options: [
          {
            label: "Center",
            value: "center",
          },
          {
            label: "Justify",
            value: "justify",
          },
          {
            label: "Left",
            value: "left",
          },
          {
            label: "Right",
            value: "right",
          }
        ],
      },


    ],

  },
  {
    id: `${baseWidgetName}-interaction`,
    groupName: "INTERACTION",
    children: [
      {
        ...generatorEventHandlerConfig(
          baseWidgetName,
          LAbEL_EVENT_HANDLER_CONFIG.events
        ),
      },
    ]
  },
  {
    id: `${baseWidgetName}-decoration`,
    groupName: i18n.t("Decoration"),
    children: [
      {
        id: `${baseWidgetName}-style-bg`,
        labelName: i18n.t("editor.inspect.setter_label.theme_color"),
        setterType: "COLOR_PICKER_SETTER",
        useCustomLayout: true,
        attrName: "colorScheme",
        defaultValue: "blue",
      },
    ]
  },
  {
    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,
  },
  // {
  //   id: `${baseWidgetName}-style-noWrap`,
  //   labelName: "No Wrap",
  //   labelDesc: "No Wrap",
  //   setterType: "SWITCH_SETTER",
  //   expectedType: VALIDATION_TYPES.BOOLEAN,
  //   attrName: "noWrap",
  // },
  // {
  //   id: `${baseWidgetName}-style-classes`,
  //   labelName: "Select CSS Classes :",
  //   isSetterSingleRow:true,
  //   attrName: "classes",
  //   setterType: "BASE_MULTI_SELECT_SETTER",
  //   expectedType: VALIDATION_TYPES.ARRAY,
  // },
]
