import React, { useEffect } from 'react';
import { AiFillDislike } from 'react-icons/ai';
import { CiHeart } from 'react-icons/ci';
import { IoMdInformationCircleOutline } from 'react-icons/io';
import { FaChevronDown, FaHeart } from 'react-icons/fa';

import image from '../../assets/handbag.jpg';
import Blob from '../svg/Blob';

type Props = {
  popupBorderColorLeft: string;
  popupBorderColorRight: string;
  image: File | string | null;
  textColor: string;
  buttonColor: string;
  headerMessage: string | null;
  lockPopupMessage: string;
  position: string;
  unlockPopupMessage: string;
  toggleButtonMessage: string;
  buyNowButtonMessage: string;
  expandedHeaderMessage: string | null;
};

const PreviewWidget = ({
  popupBorderColorLeft,
  popupBorderColorRight,
  textColor,
  buttonColor,
  image,
  position,
  buyNowButtonMessage,
  expandedHeaderMessage,
  toggleButtonMessage,
  headerMessage,
}: Props): JSX.Element => {
  useEffect(() => {
    const styleId = 'dynamic-gradient-style';

    const oldStyle = document.getElementById(styleId);
    if (oldStyle) oldStyle.remove();

    const style = document.createElement('style');
    style.id = styleId;
    style.innerHTML = `
      @keyframes dynamicGradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
      .dynamic-gradient-bg {
        background: linear-gradient(-45deg, ${popupBorderColorLeft}, ${popupBorderColorRight}, ${popupBorderColorLeft}, ${popupBorderColorRight});
        background-size: 400% 400%;
        animation: dynamicGradient 15s ease infinite;
      }
    `;

    document.head.appendChild(style);
  }, [popupBorderColorLeft, popupBorderColorRight]);

  return (
    <div
      className={`bg-[#F4F4F4] min-h-[500px] p-4 rounded-md flex flex-col space-y-4 justify-end mx-auto relative w-full 
        ${position === 'left' ? 'items-start' : 'items-end'}`}
      style={{ color: textColor }}
    >
      <div className="rounded-full p-[3px] w-fit dynamic-gradient-bg">
        {image ? (
          <img
            src={image instanceof File ? URL.createObjectURL(image) : image}
            alt="logo"
            className="object-cover w-8 h-8 rounded-full"
          />
        ) : (
          <Blob className="w-8 h-8" />
        )}
      </div>

      <div className="rounded-xl p-[3px] w-full md:w-1/2 dynamic-gradient-bg">
        <div className="bg-white space-y-1 rounded-xl p-3">
          <div className="flex space-x-1 justify-between items-center pb-4">
            <div className="rounded-full p-[2px] w-fit dynamic-gradient-bg">
              {image ? (
                <img
                  src={
                    image instanceof File ? URL.createObjectURL(image) : image
                  }
                  alt="logo"
                  className="object-cover w-6 h-6 min-w-6 min-h-6 rounded-full"
                />
              ) : (
                <Blob className="w-6 h-6" />
              )}
            </div>
            <p className="text-xs font-semibold">
              {headerMessage ||
                'Hi there! Discover products tailored just for you today!'}
            </p>
            <div className="w-3 h-3">
              <FaChevronDown className="text-base" />
            </div>
          </div>

          <button
            className="w-full flex space-x-2 line-clamp-1 justify-center items-center px-2 py-2 rounded-md text-white cursor-pointer"
            style={{ background: buttonColor }}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 155 180"
              className="w-4 h-4"
            >
              <path
                fill="#fff"
                d="M59.741 10.16c1.692-3.873 7.185-3.873 8.877 0l14.316 32.766a4.84 4.84 0 0 0 2.5 2.5L118.2 59.74c3.873 1.692 3.873 7.185 0 8.877L85.433 82.934a4.84 4.84 0 0 0-2.5 2.5L68.619 118.2c-1.692 3.873-7.185 3.873-8.877 0L45.425 85.433a4.84 4.84 0 0 0-2.499-2.5L10.159 68.619c-3.872-1.692-3.872-7.185 0-8.877l32.767-14.316a4.84 4.84 0 0 0 2.5-2.499zM94.363 112.313c.957-2.192 4.067-2.192 5.024 0l8.104 18.547a2.74 2.74 0 0 0 1.414 1.415l18.548 8.103c2.192.958 2.192 4.067 0 5.025l-18.548 8.103a2.74 2.74 0 0 0-1.414 1.415l-8.104 18.547c-.957 2.192-4.067 2.192-5.024 0l-8.104-18.547a2.74 2.74 0 0 0-1.414-1.415l-18.547-8.103c-2.193-.958-2.193-4.067 0-5.025l18.547-8.103a2.74 2.74 0 0 0 1.414-1.415zM132.99 83.18c.543-1.242 2.305-1.242 2.848 0l4.592 10.51c.156.36.443.646.801.802l10.51 4.592c1.243.543 1.243 2.305 0 2.848l-10.51 4.591a1.55 1.55 0 0 0-.801.802l-4.592 10.51c-.543 1.242-2.305 1.242-2.848 0l-4.591-10.51a1.56 1.56 0 0 0-.802-.802l-10.51-4.591c-1.242-.543-1.242-2.305 0-2.848l10.51-4.592c.359-.156.645-.443.802-.801z"
              ></path>
            </svg>
            <span className="line-clamp-1 break-words font-bold text-xs">
              {toggleButtonMessage}
            </span>
          </button>

          <p className="text-[10px] text-center">Or</p>

          <div className="w-full p-[2px] rounded-md dynamic-gradient-bg">
            <div className="w-full bg-white rounded-md px-2 py-2 flex items-center text-zinc-400">
              <p className="">Search your favorite</p>
            </div>
          </div>
        </div>
      </div>

      <div className="rounded-xl p-[3px] w-full md:w-1/2 dynamic-gradient-bg">
        <div className="bg-white space-y-3 rounded-xl p-3">
          <div className="flex space-x-1 justify-between items-center">
            <div className="rounded-full p-[2px] w-fit dynamic-gradient-bg">
              {image ? (
                <img
                  src={
                    image instanceof File ? URL.createObjectURL(image) : image
                  }
                  alt="logo"
                  className="object-cover w-6 h-6 min-w-6 min-h-6 rounded-full"
                />
              ) : (
                <Blob className="w-6 h-6" />
              )}
            </div>
            <p className="text-xs font-semibold">
              {headerMessage ||
                "If you're looking for a versatile denim staple, this 5 Pocket Jean by Nigel Cabourn is worth considering"}
            </p>
            <div className="w-3 h-3">
              <FaChevronDown className="text-base" />
            </div>
          </div>
          <div className="flex flex-col text-xs">
            <p>• Fastens securely with copper straps</p>
            <p>• Stiff fabric for long wear </p>
            <p>• High-quality Japanese craftsmanship guaranteed </p>
          </div>

          <button
            className="w-full flex space-x-2 line-clamp-1 justify-center items-center px-2 py-2 rounded-md text-white cursor-pointer"
            style={{ backgroundColor: buttonColor }}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 155 180"
              className="w-4 h-4"
            >
              <path
                fill="#fff"
                d="M59.741 10.16c1.692-3.873 7.185-3.873 8.877 0l14.316 32.766a4.84 4.84 0 0 0 2.5 2.5L118.2 59.74c3.873 1.692 3.873 7.185 0 8.877L85.433 82.934a4.84 4.84 0 0 0-2.5 2.5L68.619 118.2c-1.692 3.873-7.185 3.873-8.877 0L45.425 85.433a4.84 4.84 0 0 0-2.499-2.5L10.159 68.619c-3.872-1.692-3.872-7.185 0-8.877l32.767-14.316a4.84 4.84 0 0 0 2.5-2.499zM94.363 112.313c.957-2.192 4.067-2.192 5.024 0l8.104 18.547a2.74 2.74 0 0 0 1.414 1.415l18.548 8.103c2.192.958 2.192 4.067 0 5.025l-18.548 8.103a2.74 2.74 0 0 0-1.414 1.415l-8.104 18.547c-.957 2.192-4.067 2.192-5.024 0l-8.104-18.547a2.74 2.74 0 0 0-1.414-1.415l-18.547-8.103c-2.193-.958-2.193-4.067 0-5.025l18.547-8.103a2.74 2.74 0 0 0 1.414-1.415zM132.99 83.18c.543-1.242 2.305-1.242 2.848 0l4.592 10.51c.156.36.443.646.801.802l10.51 4.592c1.243.543 1.243 2.305 0 2.848l-10.51 4.591a1.55 1.55 0 0 0-.801.802l-4.592 10.51c-.543 1.242-2.305 1.242-2.848 0l-4.591-10.51a1.56 1.56 0 0 0-.802-.802l-10.51-4.591c-1.242-.543-1.242-2.305 0-2.848l10.51-4.592c.359-.156.645-.443.802-.801z"
              ></path>
            </svg>
            <p className="line-clamp-1 break-words font-bold text-xs">
              Add to cart
            </p>
          </button>

          <div className="w-full p-[2px] rounded-md flex justify-between items-center">
            <div className="flex space-x-1 items-center">
              <CiHeart style={{ color: buttonColor }} className="text-base" />
              <p>Save for later</p>
            </div>
            <div>Similar items</div>
          </div>
        </div>
      </div>

      <div className="w-full xl:w-[90%] p-[3px] rounded-xl dynamic-gradient-bg">
        <div className="bg-white p-2 rounded-xl">
          <div className="w-full space-y-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-1">
                <div className="p-[2px] rounded-full dynamic-gradient-bg">
                  {image ? (
                    <img
                      src={
                        image instanceof File
                          ? URL.createObjectURL(image)
                          : image
                      }
                      alt="logo"
                      className="object-cover w-6 h-6 rounded-full"
                    />
                  ) : (
                    <Blob className="w-6 h-6" />
                  )}
                </div>

                <p className="text-xs font-bold">
                  {expandedHeaderMessage || 'Pick your favorite'}
                </p>
              </div>
              <FaChevronDown className="text-base" />
            </div>
            <div className="w-full h-full grid grid-cols-3 gap-4">
              <RecommendationCard
                price={39.99}
                discount={43.99}
                buyNowButtonMessage={buyNowButtonMessage}
                buttonColor={buttonColor}
              />
              <RecommendationCard
                price={228.0}
                buyNowButtonMessage={buyNowButtonMessage}
                buttonColor={buttonColor}
              />
              <RecommendationCard
                price={243.6}
                buyNowButtonMessage={buyNowButtonMessage}
                buttonColor={buttonColor}
              />
            </div>
            <div className="w-full flex justify-between items-center">
              <div className="relative flex items-center space-x-1 border text-sm border-zinc-200 rounded-full px-2 py-1">
                <FaHeart style={{ color: buttonColor }} />
                <p className="text-xs font-normal">Wishlists</p>
                <div className="absolute flex justify-center items-center -top-2 -right-3 w-5 h-5 bg-[#c81d25] rounded-full">
                  <p className="text-xs text-white">4</p>
                </div>
              </div>
              <div className="text-base flex items-center space-x-1">
                <p className="text-xs">Powered by Recomaze</p>
                <IoMdInformationCircleOutline />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PreviewWidget;

type ICard = {
  buyNowButtonMessage: string;
  buttonColor: string;
  price: number;
  discount?: number;
};

const RecommendationCard = ({
  price,
  discount,
  buttonColor,
  buyNowButtonMessage,
}: ICard): JSX.Element => {
  return (
    <div className="w-full h-full space-y-1 md:space-y-2">
      <div className="w-full rounded-md relative">
        {discount ? (
          <div className="bg-[#444444] text-white absolute left-1 top-1 px-3 rounded-full">
            <p className="text-[10px]">
              {(((discount - price) * 100) / price).toFixed(0)}%
            </p>
          </div>
        ) : null}
        <img
          src={image}
          alt="handbag"
          className="object-cover w-full h-full min-h-[150px] rounded-md"
        />
        <div
          style={{ color: buttonColor }}
          className="bg-white text-base absolute right-1 bottom-1 p-2 rounded-full"
        >
          <FaHeart />
        </div>
      </div>
      <div className="lg:space-y-4">
        <p className="font-medium text-xs">
          Premium and Classic Luis Vuitton Handbag
        </p>
      </div>

      <div className="space-y-1">
        <div className="flex justify-between space-x-1">
          <p className="font-bold text-base">€ {price.toFixed(2)}</p>
          {discount ? (
            <p className="line-through text-sm font-bold">
              € {discount.toFixed(2)}
            </p>
          ) : null}
        </div>
        <p className="font-normal text-xs">
          <span className="text-[10px]">In Stock</span>
        </p>
      </div>
      <div className="flex items-center space-x-1 md:space-x-2">
        <div className="min-w-1 md:min-w-4">
          <AiFillDislike className="text-xl" />
        </div>
        <button
          className="w-full flex space-x-2 line-clamp-1 justify-center items-center px-2 py-2 rounded-md text-white cursor-pointer"
          style={{ backgroundColor: buttonColor }}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 155 180"
            className="w-4 h-4"
          >
            <path
              fill="#fff"
              d="M59.741 10.16c1.692-3.873 7.185-3.873 8.877 0l14.316 32.766a4.84 4.84 0 0 0 2.5 2.5L118.2 59.74c3.873 1.692 3.873 7.185 0 8.877L85.433 82.934a4.84 4.84 0 0 0-2.5 2.5L68.619 118.2c-1.692 3.873-7.185 3.873-8.877 0L45.425 85.433a4.84 4.84 0 0 0-2.499-2.5L10.159 68.619c-3.872-1.692-3.872-7.185 0-8.877l32.767-14.316a4.84 4.84 0 0 0 2.5-2.499zM94.363 112.313c.957-2.192 4.067-2.192 5.024 0l8.104 18.547a2.74 2.74 0 0 0 1.414 1.415l18.548 8.103c2.192.958 2.192 4.067 0 5.025l-18.548 8.103a2.74 2.74 0 0 0-1.414 1.415l-8.104 18.547c-.957 2.192-4.067 2.192-5.024 0l-8.104-18.547a2.74 2.74 0 0 0-1.414-1.415l-18.547-8.103c-2.193-.958-2.193-4.067 0-5.025l18.547-8.103a2.74 2.74 0 0 0 1.414-1.415zM132.99 83.18c.543-1.242 2.305-1.242 2.848 0l4.592 10.51c.156.36.443.646.801.802l10.51 4.592c1.243.543 1.243 2.305 0 2.848l-10.51 4.591a1.55 1.55 0 0 0-.801.802l-4.592 10.51c-.543 1.242-2.305 1.242-2.848 0l-4.591-10.51a1.56 1.56 0 0 0-.802-.802l-10.51-4.591c-1.242-.543-1.242-2.305 0-2.848l10.51-4.592c.359-.156.645-.443.802-.801z"
            ></path>
          </svg>
          <p className="line-clamp-1 break-words font-bold text-xs">
            {buyNowButtonMessage}
          </p>
        </button>
      </div>
    </div>
  );
};