import i18n from "@/i18n/config";
import { PanelConfig } from "@/page/App/components/InspectPanel/interface";
import { VALIDATION_TYPES } from "@/utils/validationFactory";
import { CREDIT_CARD_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig";
import { generatorEventHandlerConfig } from "../PublicSector/utils/generatorEventHandlerConfig";

const baseWidgetName = "creditCard";

// cardWidth = 150,
// bank_name = "BANK NAME",
// card_no,
// cardholder_name = "cardholder_name",
// expiry_date = "00/00",
export const CREDIT_CARD_PANEL_CONFIG: PanelConfig[] = [
  {
    id: `${baseWidgetName}-basic`,
    groupName: i18n.t("editor.inspect.setter_group.basic"),
    children: [
      {
        id: `${baseWidgetName}-card-holderName`,
        labelName: "Card Holder Name",
        attrName: "cardholder_name",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.STRING,
      },
      {
        id: `${baseWidgetName}-card-bank_name`,
        labelName: "Bank Name",
        attrName: "bank_name",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.STRING,
        defaultValue: "BANK NAME",
      }, //imageWidth,cardHeight
      {
        id: `${baseWidgetName}-card-card_no`,
        labelName: "Card No.",
        attrName: "card_no",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.STRING,
      },

      {
        id: `${baseWidgetName}-label-cardWidth`,
        labelName: "Card Width",
        attrName: "cardWidth",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.NUMBER,
      },
      {
        id: `${baseWidgetName}-label-expiry_date`,
        labelName: "Expiry Date",
        attrName: "expiry_date",
        setterType: "INPUT_SETTER",
        expectedType: VALIDATION_TYPES.STRING,
      },
    ],
  },
  {
    id: `${baseWidgetName}-interaction`,
    groupName: "INTERACTION",
    children: [
      {
        ...generatorEventHandlerConfig(
          baseWidgetName,
          CREDIT_CARD_EVENT_HANDLER_CONFIG.events
        ),
      },
    ],
  },
  {
    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,
      },
    ],
  },
];
