import React from 'react';

import Blob from '../svg/Blob';
import RecordingIcon from '../icons/RecordingIcon';
import SearchIcon from '../icons/SearchIcon';
import SparkleIcon from '../icons/SparkleIcon';

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

export const MinimizedPreviewWidget = ({
  logoSrc,
  youtubeId = 'dQw4w9WgXcQ',
  expandedHeaderMessage,
  position,
  buttonColor,
  textColor,
}: Props) => {
  const images = [
    'https://recomaze-cdn.nyc3.cdn.digitaloceanspaces.com/public/2015-04-30_Reshoot_03_13996_21431.webp',
    'https://recomaze-cdn.nyc3.cdn.digitaloceanspaces.com/public/2015-03-20_Ashley_Look_20_23515_15565.webp',
    'https://recomaze-cdn.nyc3.cdn.digitaloceanspaces.com/public/2015-02-08_Lana_Look_14_30132_2861.webp',
  ];

  return (
    <div
      className={`flex items-center ${
        position === 'left' ? 'justify-start' : 'justify-end'
      }`}
    >
      <div className="w-fit 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-[#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-3 flex items-end gap-1 pl-1">
                {images.map((src, i) => (
                  <div
                    key={i}
                    className={[
                      'h-10 w-10 rounded-md bg-white border border-white overflow-hidden',
                      'shadow-[0_20px_40px_rgba(234,76,137,0.25)]',
                      i === 0
                        ? '-rotate-4'
                        : i === 2
                          ? 'rotate-6'
                          : '-rotate-1',
                    ].join(' ')}
                  >
                    <img
                      src={src}
                      alt="product"
                      className="h-full w-full object-cover"
                    />
                  </div>
                ))}
              </div>
            </div>

            <div
              className="mt-5 rounded-md text-center py-2 px-4"
              style={{ background: buttonColor, color: textColor }}
            >
              <div className="inline-flex items-center gap-3 py-1 text-xs font-semibold tracking-tight">
                <span>Specially selected for you</span>
                <SparkleIcon />
              </div>
            </div>

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

            {youtubeId ? (
              <>
                <div className="mt-2 h-px bg-[#e9e9ee]" />

                <div className="mt-3 flex items-start gap-4">
                  <div className="shrink-0 rounded-[14px] border border-[#dfd9ff] shadow-[0_4px_12px_rgba(0,0,0,0.1)] overflow-hidden">
                    <div className="h-[6px] w-full bg-[#6745ff]" />
                    <div className="w-28 h-16 bg-black">
                      <iframe
                        className="w-full h-full"
                        src={`https://www.youtube.com/embed/${youtubeId}?autoplay=1&mute=1&controls=0&rel=0&playsinline=1`}
                        title="YouTube video"
                        allow="autoplay; encrypted-media; picture-in-picture"
                        allowFullScreen
                      />
                    </div>
                  </div>

                  <div className="pt-1">
                    <h2 className="w-auto text-sm font-semibold text-[#747a81]">
                      Learn all about Recomaze and how to shop with Recomaze!
                    </h2>
                    <a
                      href={`https://www.youtube.com/watch?v=${youtubeId}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="mt-3 inline-block text-sm leading-[26px] font-semibold text-[#747a81] underline underline-offset-4"
                    >
                      Watch Now
                    </a>
                  </div>
                </div>
              </>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  );
};