// import i18n from "@/i18n/config"
import i18n from "@/i18n/config"
import { PanelConfig } from "@/page/App/components/InspectPanel/interface"
import { ScreenPayload } from "@/redux/config/configState"
import { VALIDATION_TYPES } from "@/utils/validationFactory"
export const BUILD_BASIC_NATIVE_CONTAINER_PANEL_CONFIG = (currentScreen: ScreenPayload) => {
  const baseWidgetName = "View"
  const BasicContainer_PANEL_CONFIG: PanelConfig[] = [


    {
      id: `${baseWidgetName}-basic`,
      groupName: i18n.t("editor.inspect.setter_group.basic"),
      children: [
        {
          id: `${baseWidgetName}-viewList-extraSmallScreen`,
          labelName: "Flex",
          labelDesc: "Flex",
          attrName: `flex`,
          defaultValue: "1",
          expectedType: VALIDATION_TYPES.STRING,
          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,
        },
        // {
        //   id: `${baseWidgetName}-style-Direction`,
        //   setterType: "RADIO_GROUP_SETTER",
        //   labelName: i18n.t("Direction"),
        //   attrName: "direction",
        //   options: [
        //     {
        //       label: "row",
        //       value: "row",
        //     },
        //     {
        //       label: "column",
        //       value: "column",
        //     },
        //   ],
        // },

        // {
        //   id: `${baseWidgetName}-style-align`,
        //   setterType: "RADIO_GROUP_SETTER",
        //   labelName: i18n.t("Align"),
        //   attrName: "align",
        //   options: [
        //     {
        //       label: "flex-start",
        //       value: "flex-start",
        //     },
        //     {
        //       label: "flex-end",
        //       value: "flex-end",
        //     },
        //     {
        //       label: "center",
        //       value: "center",
        //     },
        //     {
        //       label: "stretch",
        //       value: "stretch",
        //     },
        //     {
        //       label: "baseline",
        //       value: "baseline",
        //     },
        //   ]
        // },
        // {
        //   id: `${baseWidgetName}-style-justify`,
        //   setterType: "RADIO_GROUP_SETTER",
        //   labelName: i18n.t("Justify"),
        //   attrName: "justify",
        //   options: [
        //     {
        //       label: "flex-start",
        //       value: "flex-start",
        //     },
        //     {
        //       label: "flex-end",
        //       value: "flex-end",
        //     },
        //     {
        //       label: "center",
        //       value: "center",
        //     },
        //     {
        //       label: "space-between",
        //       value: "space-between",
        //     },
        //     {
        //       label: "space-around",
        //       value: "space-around",
        //     },
        //     {
        //       label: "space-evenly",
        //       value: "space-evenly",
        //     },

        //   ]
        // },

        // {
        //   id: `${baseWidgetName}-label-noWrap`,
        //   labelName: "Wrap Text",
        //   attrName: "wrapText",
        //   setterType: "INPUT_SETTER",
        //   expectedType: VALIDATION_TYPES.BOOLEAN,
        //   defaultValue: true
        // },

        //   {
        //     id: `${baseWidgetName}-viewList-extraSmallScreen`,
        //     labelName: "Row Gap",
        //     labelDesc: "Row Gap",
        //     attrName: `rowGap`,
        //     defaultValue: "1",
        //     expectedType: VALIDATION_TYPES.STRING,
        //     setterType: "INPUT_SETTER",
        //   },

      ],
    },
    // {
    //   id: `${baseWidgetName}-viewList-extraSmallScreen`,
    //   labelName: "Flex",
    //   labelDesc: "Flex",
    //   attrName: `flex`,
    //   defaultValue: "1",
    //   expectedType: VALIDATION_TYPES.STRING,
    //   setterType: "INPUT_SETTER",
    // },
    // {
    //   id: `${baseWidgetName}-style-align`,
    //   setterType: "RADIO_GROUP_SETTER",
    //   labelName: i18n.t("Align"),
    //   attrName: "align",
    //   options: [
    //     {
    //       label: "flex-start",
    //       value: "flex-start",
    //     },
    //     {
    //       label: "flex-end",
    //       value: "flex-end",
    //     },
    //     {
    //       label: "center",
    //       value: "center",
    //     },
    //     {
    //       label: "stretch",
    //       value: "stretch",
    //     },
    //     {
    //       label: "baseline",
    //       value: "baseline",
    //     },
    //   ]
    // },

  ]
  return BasicContainer_PANEL_CONFIG;
}
