import React from 'react';
import { BiCheck } from 'react-icons/bi';
import { BsHeartFill } from 'react-icons/bs';

import Blob from '../svg/Blob';
import ComparePriceIcon from '../icons/ComparePriceIcon';
import SparkleIcon from '../icons/SparkleIcon';

type Props = {
  logoSrc?: File | string | null;
  expandedHeaderMessage: string | null;
  position: string;
  buttonColor: string;
  textColor: string;
};

export const SingleProductPreviewWidget = ({
  logoSrc,
  expandedHeaderMessage,
  position,
  buttonColor,
  textColor,
}: Props) => {
  const product = {
    image:
      'https://recomaze-cdn.nyc3.cdn.digitaloceanspaces.com/public/2015-03-20_Ashley_Look_20_23515_15565.webp',
    title: 'Berry Top',
    price: 278.6,
    currency: '€',
    blurb: "You'll adore this versatile, off-white tunic!",
    bullets: [
      'Double-zip for custom fit.',
      'Soft cotton/spandex blend.',
      'Made in Japan.',
    ],
    stockText: 'In stock',
  };

  return (
    <div
      className={`flex items-center ${
        position === 'left' ? 'justify-start' : 'justify-end'
      }`}
    >
      <div className="w-auto max-w-[400px]">
        <div className="relative rounded-xl p-[4px] dynamic-gradient-bg">
          <div className="absolute -inset-1 rounded-md pointer-events-none" />

          <div className="relative rounded-xl bg-white p-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="dynamic-gradient-bg rounded-full p-[2px]">
                  {logoSrc ? (
                    <img
                      src={
                        logoSrc
                          ? logoSrc instanceof File
                            ? URL.createObjectURL(logoSrc)
                            : logoSrc
                          : undefined
                      }
                      alt="logo"
                      className="h-10 w-10 rounded-full object-cover"
                    />
                  ) : (
                    <Blob className="w-6 h-6" />
                  )}
                </div>
                <h1 className="text-sm font-semibold text-[#121212]">
                  {expandedHeaderMessage ||
                    'Choose your favorite header and make it yours'}
                </h1>
              </div>
              <svg
                className="h-7 w-7 text-black/80"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.4"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M6 9l6 6 6-6" />
              </svg>
            </div>

            <div className="mt-4 rounded-md bg-[#f3f3f5] px-5 py-5 shadow-[inset_0_-1px_0_rgba(0,0,0,0.04)]">
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-4">
                  <img
                    src={product.image}
                    alt={product.title}
                    className="h-[60px] w-[60px] rounded-[14px] object-cover bg-[#eef0f2]"
                  />
                  <div>
                    <div className="text-sm font-semibold text-[#222]">
                      {product.title}
                    </div>
                    <div className="mt-1 text-base font-bold tracking-tight text-[#111]">
                      {product.currency} {formatMoney(product.price)}
                    </div>
                  </div>
                </div>

                <div className="mt-1 text-sm font-semibold text-[#54575c] underline underline-offset-2">
                  {product.stockText}
                </div>
              </div>

              <p className="mt-4 text-sm text-[#9aa0a6]">{product.blurb}</p>
              <ul className="mt-4 space-y-3">
                {product.bullets.map((b, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <span className="mt-[2px] inline-flex h-4 w-4 items-center justify-center rounded-full bg-[#1d2731] text-white">
                      <BiCheck className="h-2 w-2" />
                    </span>
                    <span className="text-sm font-semibold text-[#3a3f45]">
                      {b}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            <button
              type="button"
              className="mt-4 w-full rounded-md  py-3 text-center shadow-[0_1px_0_rgba(0,0,0,0.06)]"
              style={{ background: buttonColor, color: textColor }}
            >
              <span className="inline-flex items-center gap-3 text-xs font-semibold">
                Add to cart <SparkleIcon />
              </span>
            </button>

            <div className="mt-5 flex items-center justify-between">
              <button className="flex items-center gap-2 text-sm text-[#8d9196]">
                <BsHeartFill className="h-4 w-4 text-black" />
                <span>Save</span>
              </button>

              <div className="flex items-center gap-2 text-sm font-semibold text-[#8a61ff]">
                <ComparePriceIcon />
                <span>Similar items</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const formatMoney = (n: number) => {
  return n.toLocaleString(undefined, {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};