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 { generatorEventHandlerConfig } from "@/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig";
import { FORM_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig";
import { ScreenPayload } from "@/redux/config/configState";

const baseWidgetName = "form";
export const FORM_PANEL_CONFIG_BUILDER = (
  currentScreen: ScreenPayload = "Desktop"
): PanelConfig[] => [
  {
    id: `${baseWidgetName}-basic`,
    groupName: i18n.t("editor.inspect.setter_group.basic"),
    children: [
      {
        id: `${baseWidgetName}-columnSize`,
        labelName: `Column Per Row`,
        attrName: `${currentScreen}.columnSize`,
        setterType: "INPUT_SETTER",
        // expectedType: VALIDATION_TYPES.STRING,
      },
      {
        id: `${baseWidgetName}-${currentScreen}-styles-columnFraction`,
        setterType: "ColumnFraction_INPUT_SETTER",
        labelName: "Column Fraction Ration (FR)",
        attrName: `${currentScreen}.columnFraction`,
        // expectedType: VALIDATION_TYPES.STRING,
        defaultValue: "1",
        useCustomLayout: true,
      },
      {
        id: `${baseWidgetName}-gridGap`,
        labelName: "Grid Gap",
        attrName: `${currentScreen}.gridGap`,
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.NUMBER,
      },
    ],
  },
  {
    id: `${baseWidgetName}-interaction`,
    groupName: i18n.t("editor.inspect.setter_group.interaction"),
    children: [
      {
        ...generatorEventHandlerConfig(
          baseWidgetName,
          FORM_EVENT_HANDLER_CONFIG.events
        ),
      },
      {
        id: `${baseWidgetName}-interaction-disabled`,
        labelName: i18n.t("editor.inspect.setter_label.disabled"),
        labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"),
        attrName: "disabled",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.BOOLEAN,
        placeholder: "{{false}}",
      },
      {
        id: `${baseWidgetName}-interaction-disabled-submit`,
        labelName: i18n.t("editor.inspect.setter_label.disable_submit"),
        labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled_submit"),
        attrName: "disabledSubmit",
        setterType: "DYNAMIC_SWITCH_SETTER",
        useCustomLayout: true,
        openDynamic: true,
      },
      {
        id: `${baseWidgetName}-interaction-validate-input-on-submit`,
        labelName: i18n.t(
          "editor.inspect.setter_label.validate_inputs_on_submit"
        ),
        attrName: "validateInputsOnSubmit",
        setterType: "DYNAMIC_SWITCH_SETTER",
        useCustomLayout: true,
        openDynamic: true,
      },
      {
        id: `${baseWidgetName}-interaction-reset-after-successful-submit`,
        labelName: i18n.t(
          "editor.inspect.setter_label.reset_after_successful_submit"
        ),
        attrName: "resetAfterSuccessful",
        setterType: "DYNAMIC_SWITCH_SETTER",
        useCustomLayout: true,
        openDynamic: true,
      },
    ],
  },
  {
    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-show-header`,
        labelName: i18n.t("editor.inspect.setter_label.show_header"),
        attrName: "showHeader",
        setterType: "DYNAMIC_SWITCH_SETTER",
        useCustomLayout: true,
        openDynamic: true,
      },
      {
        id: `${baseWidgetName}-layout-show-footer`,
        labelName: i18n.t("editor.inspect.setter_label.show_footer"),
        attrName: "showFooter",
        setterType: "DYNAMIC_SWITCH_SETTER",
        useCustomLayout: true,
        openDynamic: true,
      },
      {
        id: `${baseWidgetName}-layout-hidden`,
        labelName: i18n.t("editor.inspect.setter_label.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-padding`,
      //   setterType: "PADDING_INPUT_SETTER",
      //   labelName: i18n.t("editor.inspect.setter_group.padding"),
      //   attrName: "padding",
      //   useCustomLayout: true,
      // },
    ],
  },
];
