

import i18n from "@/i18n/config"
const baseWidgetName = "Native Container"
import { VALIDATION_TYPES } from "@/utils/validationFactory"
import RadioIcon from "@/assets/radius-icon.svg"

export const NATIVECONTAINER_PANEL_CONFIG: any[] = [
  {
    id: `${baseWidgetName}-basic`,
    groupName: i18n.t("editor.inspect.setter_group.basic"),
    children: [
      {
        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}-rowGap`,
          labelName: "Row Gap",
          labelDesc: "Row Gap",
          attrName: `rowGap`,
          defaultValue: 1,
          expectedType: VALIDATION_TYPES.NUMBER,
          setterType: "INPUT_SETTER",
        },
        {
          id: `${baseWidgetName}-columnGap`,
          labelName: "columnGap",
          labelDesc: "columnGap",
          attrName: `columnGap`,
          defaultValue: 1,
          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,
        },

    ],
  },
]
