import i18n from "@/i18n/config";
import { PanelConfig } from "@/page/App/components/InspectPanel/interface";
import { VALIDATION_TYPES } from "@/utils/validationFactory";

const baseWidgetName = "image";
export const IMAGE_NATIVE_PANEL_CONFIG: PanelConfig[] = [
  {
    id: `${baseWidgetName}-basic`,
    groupName: i18n.t("editor.inspect.setter_group.basic"),
    children: [
      {
        id: `${baseWidgetName}-label-imageUrl`,
        labelName: "Image Url",
        attrName: "imageUrl",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.STRING,
      },
      {
        id: `${baseWidgetName}-basic-alternativeText`,
        labelName: "Alternative Text",
        attrName: "alternativeText",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.STRING,
      },
      {
        id: `${baseWidgetName}-basic-objectfit`,
        labelName: "Image Fit",
        labelDesc: "imagefit",
        attrName: "objectfit",
        expectedType: VALIDATION_TYPES.STRING,
        setterType: "SEARCH_SELECT_SETTER",
        options: [
          {
            label: "contain",
            value: "contain",
          },
          {
            label: "cover",
            value: "cover",
          },
          {
            label: "fill",
            value: "fill",
          },
          {
            label: "none",
            value: "none",
          },
          {
            label: "scale-down",
            value: "scale-down",
          }
          ,//fill  none scale-down
        ],
      },
      //alternativeText
    ],
  },
  {
    id: `${baseWidgetName}-style`,
    groupName: i18n.t("editor.inspect.setter_group.style"),
    children: [
      {
        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,
      },
    ],
  },
];
