import { getStatic } from '@/utils';

/** The type of product card list layout */
export enum LKS_PRODUCT_CARD_MODULE_LAYOUT {
  VERTICAL = 'VERTICAL',
  HORIZONTAL = 'HORIZONTAL',
}

export const LKSProductCardModuleLayoutOptions = [
  {
    value: LKS_PRODUCT_CARD_MODULE_LAYOUT.VERTICAL,
    label: 'Vertical Display',
    tips: <img src={getStatic('/images/vertical-display.png')} />,
  },
  {
    value: LKS_PRODUCT_CARD_MODULE_LAYOUT.HORIZONTAL,
    label: 'Horizontal Display',
    tips: <img src={getStatic('/images/horizontal-display.png')} />,
  },
];

/** The type of individual product card layout */
export enum LKS_PRODUCT_CARD_CARD_LAYOUT {
  UP_DOWN = 'UP_DOWN',
  LEFT_RIGHT = 'LEFT_RIGHT',
}

export const LKSProductCardLayoutOptions = [
  {
    value: LKS_PRODUCT_CARD_CARD_LAYOUT.UP_DOWN,
    label: 'Up & Down',
    tips: <img src={getStatic('/images/up-down.png')} />,
  },
  {
    value: LKS_PRODUCT_CARD_CARD_LAYOUT.LEFT_RIGHT,
    label: 'Left & Right',
    tips: <img src={getStatic('/images/left-right.png')} />,
  },
];

/** Product card image size */
export enum LKS_PRODUCT_CARD_PICTURE_SIZE {
  SMALL = 'Small',
  MEDIUM = 'Medium',
  LARGE = 'Large',
}

/** Product card image size mapping */
export const LKSProductCardPictureSizeMap: Record<
  LKS_PRODUCT_CARD_PICTURE_SIZE,
  [number, number]
> = {
  [LKS_PRODUCT_CARD_PICTURE_SIZE.SMALL]: [180, 240],
  [LKS_PRODUCT_CARD_PICTURE_SIZE.MEDIUM]: [300, 400],
  [LKS_PRODUCT_CARD_PICTURE_SIZE.LARGE]: [600, 800],
};

export const LKSProductCardPictureSizeOptions = [
  LKS_PRODUCT_CARD_PICTURE_SIZE.SMALL,
  LKS_PRODUCT_CARD_PICTURE_SIZE.MEDIUM,
  LKS_PRODUCT_CARD_PICTURE_SIZE.LARGE,
].map(size => ({
  label: `${size}(${LKSProductCardPictureSizeMap[size].join('*')})`,
  value: size,
}));

/** The information that can be displayed on the product card */
export enum LKS_PRODUCT_CARD_INFO_TYPE {
  BRAND = 'BRAND',
  CATEGORY = 'CATEGORY',
  PRODUCT_NAME = 'PRODUCT_NAME',
  DISCOUNT_PRICE = 'DISCOUNT_PRICE',
  ORIGINAL_PRICE = 'ORIGINAL_PRICE',
}

export const LKSProductCardInfoTypeList = [
  LKS_PRODUCT_CARD_INFO_TYPE.BRAND,
  LKS_PRODUCT_CARD_INFO_TYPE.CATEGORY,
  LKS_PRODUCT_CARD_INFO_TYPE.PRODUCT_NAME,
  LKS_PRODUCT_CARD_INFO_TYPE.DISCOUNT_PRICE,
  LKS_PRODUCT_CARD_INFO_TYPE.ORIGINAL_PRICE,
];

export const LKSProductCardInfoTypeTextMap: Record<
  LKS_PRODUCT_CARD_INFO_TYPE,
  string
> = {
  [LKS_PRODUCT_CARD_INFO_TYPE.BRAND]: 'Brand',
  [LKS_PRODUCT_CARD_INFO_TYPE.CATEGORY]: 'Category',
  [LKS_PRODUCT_CARD_INFO_TYPE.PRODUCT_NAME]: 'Product Name',
  [LKS_PRODUCT_CARD_INFO_TYPE.DISCOUNT_PRICE]: 'Discount Price',
  [LKS_PRODUCT_CARD_INFO_TYPE.ORIGINAL_PRICE]: 'Original Price',
};

export type InfoDisplayType = 'HOVER' | 'COMMON';

/** A mapping of the information that can be displayed when the product card is UP_DOWN the layout */
export const LKSProductCardUpDownInfoDisplayMap: Record<
  LKS_PRODUCT_CARD_PICTURE_SIZE,
  [InfoDisplayType, ...LKS_PRODUCT_CARD_INFO_TYPE[]]
> = {
  [LKS_PRODUCT_CARD_PICTURE_SIZE.SMALL]: [
    'COMMON',
    LKS_PRODUCT_CARD_INFO_TYPE.PRODUCT_NAME,
    LKS_PRODUCT_CARD_INFO_TYPE.DISCOUNT_PRICE,
    LKS_PRODUCT_CARD_INFO_TYPE.ORIGINAL_PRICE,
  ],
  [LKS_PRODUCT_CARD_PICTURE_SIZE.MEDIUM]: [
    'COMMON',
    LKS_PRODUCT_CARD_INFO_TYPE.BRAND,
    LKS_PRODUCT_CARD_INFO_TYPE.PRODUCT_NAME,
    LKS_PRODUCT_CARD_INFO_TYPE.DISCOUNT_PRICE,
    LKS_PRODUCT_CARD_INFO_TYPE.ORIGINAL_PRICE,
  ],
  [LKS_PRODUCT_CARD_PICTURE_SIZE.LARGE]: [
    'HOVER',
    LKS_PRODUCT_CARD_INFO_TYPE.BRAND,
    LKS_PRODUCT_CARD_INFO_TYPE.CATEGORY,
    LKS_PRODUCT_CARD_INFO_TYPE.PRODUCT_NAME,
    LKS_PRODUCT_CARD_INFO_TYPE.DISCOUNT_PRICE,
    LKS_PRODUCT_CARD_INFO_TYPE.ORIGINAL_PRICE,
  ],
};