import * as React from 'react';
import { CSSProperties, FC } from 'react';
import { IProduct, ISettings } from '../../../../../../types';
import formatCurrency from '../../../../../../utils/formatCurrency';
import Header from '../Header';

interface CartConfirmationProps {
  product: IProduct;
  isMobile: boolean;
  cartUrl?: string;
  onContinue: () => void;
  cornerType: ISettings['thumbnail_corners'];
}

const CartConfirmation: FC<CartConfirmationProps> = ({
  product,
  isMobile,
  cartUrl,
  onContinue,
  cornerType,
}) => {
  const title = [product.title, product.variant_name].filter(Boolean).join(' - ');
  const radius = cornerType === 'rounded' ? 8 : 0;

  return (
    <div style={styles.container}>
      <Header isMobile={isMobile} text='Added to cart' />
      <div style={styles.productPreview}>
        {product.image_link ? (
          <img
            src={product.image_link}
            alt={title}
            style={{ ...styles.image, borderRadius: radius }}
          />
        ) : null}
        <div style={styles.info(isMobile)}>
          <div style={styles.title}>{title}</div>
          {product.price !== undefined && product.price > 0 && product.currency ? (
            <div style={styles.price(isMobile)}>
              {formatCurrency(product.price, product.currency)}
            </div>
          ) : null}
        </div>
      </div>
      <div style={styles.actions}>
        {cartUrl ? (
          <a
            href={cartUrl}
            style={{ ...styles.cartButton, borderRadius: radius }}
            target='_self'
            onClick={(e) => e.stopPropagation()}
          >
            See my cart
          </a>
        ) : null}
        <button
          type='button'
          style={{ ...styles.continueButton, borderRadius: radius }}
          onClick={onContinue}
        >
          Continue
        </button>
      </div>
    </div>
  );
};

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    paddingTop: 4,
  } as CSSProperties,

  productPreview: {
    display: 'flex',
    alignItems: 'center',
    gap: 12,
    padding: '10px 0',
  } as CSSProperties,

  image: {
    width: 64,
    height: 64,
    objectFit: 'cover',
    flexShrink: 0,
    borderRadius: 4,
  } as CSSProperties,

  info: (isMobile: boolean): CSSProperties => ({
    flex: 1,
    fontSize: isMobile ? 14 : 16,
    overflow: 'hidden',
  }),

  title: {
    fontWeight: 300,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp: 2,
    WebkitBoxOrient: 'vertical',
    lineHeight: 1.2,
    marginBottom: 4,
  } as CSSProperties,

  price: (isMobile: boolean): CSSProperties => ({
    fontSize: isMobile ? 12 : 14,
    color: '#666',
  }),

  actions: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  } as CSSProperties,

  cartButton: {
    display: 'block',
    textAlign: 'center',
    padding: '10px 16px',
    backgroundColor: 'black',
    color: 'white',
    textDecoration: 'none',
    fontFamily: 'inherit',
    fontSize: 14,
    cursor: 'pointer',
    boxSizing: 'border-box',
  } as CSSProperties,

  continueButton: {
    display: 'block',
    width: '100%',
    textAlign: 'center',
    padding: '10px 16px',
    backgroundColor: 'transparent',
    color: 'black',
    fontFamily: 'inherit',
    fontSize: 14,
    cursor: 'pointer',
    border: '1px solid black',
    boxSizing: 'border-box',
  } as CSSProperties,
};

export default CartConfirmation;
