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

import Blob from '../svg/Blob';
import CartIcon from '../icons/CartIcon';
import ComparePriceIcon from '../icons/ComparePriceIcon';
import RecordingIcon from '../icons/RecordingIcon';
import SearchIcon from '../icons/SearchIcon';

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

export const ActivePreviewWidget = ({
  logoSrc,
  expandedHeaderMessage,
  position,
}: Props) => {
  const items = [
    {
      image:
        'https://recomaze-cdn.nyc3.cdn.digitaloceanspaces.com/public/2015-04-30_Reshoot_03_13996_21431.webp',
      title: 'Berry Top',
      price: 278.6,
      currency: '€',
    },
    {
      image:
        'https://recomaze-cdn.nyc3.cdn.digitaloceanspaces.com/public/2015-03-20_Ashley_Look_20_23515_15565.webp',
      title: 'Backless Oxford in Black',
      price: 498,
      currency: '€',
    },
    {
      image:
        'https://recomaze-cdn.nyc3.cdn.digitaloceanspaces.com/public/2015-02-08_Lana_Look_14_30132_2861.webp',
      title: '3/4 Sleeve Kimono Dress',
      price: 551.6,
      currency: '€',
    },
  ];

  return (
    <div
      className={`flex items-center w-full ${
        position === 'left' ? 'justify-start' : 'justify-end'
      }`}
    >
      <div className="max-w-full lg:max-w-[500px] w-fit">
        <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-[#f5f5f6]/90 px-4 pt-4 pb-5 shadow-[inset_0_-1px_0_rgba(0,0,0,0.04)] relative">
              <div className="relative z-[1] flex items-center gap-2 sm:gap-3">
                <div className="relative flex items-center w-full min-w-0 rounded-md border border-[#e8e8ec] bg-transparent px-3 sm:px-4">
                  <span className="shrink-0">
                    <SearchIcon />
                  </span>
                  <input
                    aria-label="Search"
                    placeholder="Find somet…"
                    className="ml-2 sm:ml-3 w-full min-w-0 pr-12 sm:pr-0 py-2.5 bg-transparent outline-none text-sm sm:text-base text-[#55585d] font-semibold placeholder:text-[#9aa0a6]"
                  />
                </div>

                <button
                  type="button"
                  className="grid py-2 w-12 rounded-md bg-transparent border border-[#e8e8ec] shadow-[0_1px_0_0_rgba(0,0,0,0.03)] place-items-center shrink-0"
                >
                  <RecordingIcon />
                </button>
              </div>

              <div className="relative z-[1] mt-5">
                <div className="text-base font-semibold text-[#7b69ff] tracking-tight">
                  Specially selected for you
                </div>
              </div>

              <div className="relative z-[1] mt-3 flex w-full overflow-x-auto gap-4 no-scrollbar">
                {items.map((item, idx) => (
                  <article key={idx} className="min-w-[150px]">
                    <div className="relative">
                      <img
                        src={item.image}
                        alt={item.title}
                        className="max-h-40 w-full object-cover rounded-[12px] bg-[#f3f3f5]"
                      />
                      <button className="absolute left-5 top-3 h-[24px] w-[24px] grid place-items-center">
                        <BsHeartFill className="h-[16px] w-[16px] text-[#7269ff]" />
                      </button>
                      <button className="absolute right-5 top-3 h-[24px] w-[24px] grid place-items-center">
                        <BiSolidDislike className="h-[18px] w-[18px] text-[#ff5a7a]" />
                      </button>
                    </div>

                    <div className="mt-3">
                      <h3 className="text-sm hover:underline font-medium text-[#6f767e] truncate">
                        {item.title}
                      </h3>
                    </div>

                    <div className="mt-2 flex items-center justify-between">
                      <div className="flex items-baseline gap-2">
                        <span className="text-sm font-semibold text-[#101114]">
                          {item.currency} {formatMoney(item.price)}
                        </span>
                      </div>
                      <button
                        type="button"
                        className="h-[30px] w-[30px] grid place-items-center rounded-[8px]"
                        aria-label="Add to cart"
                        title="Add to cart"
                      >
                        <CartIcon />
                      </button>
                    </div>
                  </article>
                ))}
              </div>
            </div>

            <div className="mt-4 flex items-center justify-between">
              <div className="flex items-center gap-2 text-sm font-medium text-[#a33b3b]">
                <span className="text-[#b24a4a]">Favorites</span>
                <span className="relative inline-flex items-center text-xs justify-center py-1 px-2 rounded-full border-2 border-[#b77be7] text-[#6e35b4] font-semibold">
                  2
                </span>
              </div>

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

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