import { LKSProductCardProps } from '../type';
import {
  LKSProductCardInfoTypeList,
  LKS_PRODUCT_CARD_CARD_LAYOUT,
  LKS_PRODUCT_CARD_INFO_TYPE,
} from '../constants';
import clsx from 'clsx';
import { parsePrice } from '@/utils';
import { ProductItem } from '@/services/type';

const PREFIX = 'lks-product-card__products';

export const LKSProductCard = ({
  products,
  moduleLayout,
  cardLayout,
  showInfos,
  pictureSize,
  isEdit,
}: LKSProductCardProps & {
  isEdit?: boolean;
}) => {
  const infos =
    cardLayout === LKS_PRODUCT_CARD_CARD_LAYOUT.LEFT_RIGHT
      ? LKSProductCardInfoTypeList
      : showInfos;

  const isEmpty = !products.length;

  const getInfoDisplay = (infoType: LKS_PRODUCT_CARD_INFO_TYPE) => {
    return infos.includes(infoType);
  };

  const showInfo = () => {
    if (!infos.length) return false;
    return true;
  };

  const getDiscountPrice = (product: ProductItem) => {
    const currency = product.currency?.currency_symbol || '$';
    const price = parsePrice(product.coupon_after_price);
    return `${currency} ${price}`;
  };

  const getOriginalPrice = (product: ProductItem) => {
    const currency = product.currency?.currency_symbol || '$';
    const price = parsePrice(product.item_price);
    return `${currency} ${price}`;
  };

  if (isEmpty) return null;

  return (
    <div className={clsx(PREFIX, `${PREFIX}--${moduleLayout}`)}>
      {products.map(product => (
        <a
          rel="noopener"
          href={!isEdit ? product.item_link : '#'}
          target={isEdit ? '_self' : '_blank'}
          className={clsx(
            `${PREFIX}__item`,
            `${PREFIX}__item--${cardLayout}`,
            `${PREFIX}__item--${pictureSize}`,
            `${PREFIX}__item--${cardLayout}--${pictureSize}`,
          )}
        >
          <img
            src={product.item_picture}
            className={clsx(
              `${PREFIX}__item__img`,
              `${PREFIX}__item__img--${pictureSize}`,
            )}
          />
          {showInfo() && (
            <div
              className={clsx(
                `${PREFIX}__item__info`,
                `${PREFIX}__item__info--${cardLayout}`,
              )}
            >
              {getInfoDisplay(LKS_PRODUCT_CARD_INFO_TYPE.BRAND) &&
                product.brand?.brand_en_name && (
                  <div
                    className={`${PREFIX}__item__info__brand`}
                    title={product.brand.brand_en_name}
                  >
                    {product.brand.brand_en_name}
                  </div>
                )}
              {getInfoDisplay(LKS_PRODUCT_CARD_INFO_TYPE.CATEGORY) &&
                product.category?.category_name && (
                  <div
                    className={`${PREFIX}__item__info__category`}
                    title={product.category?.category_name}
                  >
                    {product.category?.category_name}
                  </div>
                )}
              {getInfoDisplay(LKS_PRODUCT_CARD_INFO_TYPE.PRODUCT_NAME) &&
                product.item_title && (
                  <div
                    className={`${PREFIX}__item__info__name`}
                    title={product.item_title}
                  >
                    {product.item_title}
                  </div>
                )}
              <div className={`${PREFIX}__item__info__price`}>
                {getInfoDisplay(LKS_PRODUCT_CARD_INFO_TYPE.DISCOUNT_PRICE) &&
                  product.coupon_after_price && (
                    <div
                      className={`${PREFIX}__item__info__price__discount`}
                      title={getDiscountPrice(product)}
                    >
                      {getDiscountPrice(product)}
                    </div>
                  )}
                {getInfoDisplay(LKS_PRODUCT_CARD_INFO_TYPE.ORIGINAL_PRICE) &&
                  product.item_price && (
                    <div
                      className={`${PREFIX}__item__info__price__original`}
                      title={getOriginalPrice(product)}
                    >
                      {getOriginalPrice(product)}
                    </div>
                  )}
              </div>
            </div>
          )}
        </a>
      ))}
    </div>
  );
};