import React, { useEffect, useState } from "react";
import Modal from "./Modal";
import useModalStore from "../store/modal";

interface IRelevantExpCard {
  image: string;
  name: string;
  location: string;
  video?: string;
  logo: string;
  platforms: string[]; // touchscreen, vr, mobile
}

function RelevantExpCard({
  image,
  name,
  location,
  video,
  logo,
  platforms,
}: IRelevantExpCard) {
  const [modalComponent, setModalComponent] = useModalStore((state) => [
    state.component,
    state.setComponent,
  ]);

  function handleClick() {
    if (video) {
      setModalComponent(
        <video
          muted={true}
          autoPlay={true}
          playsInline={true}
          controls={true}
          className="aspect-video w-full max-h-screen"
        >
          <source src={video} type="video/mp4" />
        </video>
      );
    }
  }

  return (
    <div className="bg-[#22222A] rounded-lg overflow-hidden">
      <div
        className="relative sm:h-[404px] h-[200px] bg-no-repeat bg-cover bg-center"
        style={{ backgroundImage: `url('${image}')` }}
      >
        <div
          className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-40 flex justify-center items-center cursor cursor-pointer group"
          onClick={handleClick}
        >
          <div className="absolute top-0 left-0 w-full h-full flex justify-between">
            <div className="sm:p-6 p-3">
              <img src={logo} alt="" className="sm:w-auto w-16" />
            </div>

            <div className="flex sm:space-x-2 space-x-1 sm:p-6 p-3">
              {platforms.map((platform, index) => (
                <div key={index}>
                  {platform === "touchscreen" && (
                    <svg
                      width="40"
                      height="40"
                      viewBox="0 0 40 40"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <rect width="40" height="40" rx="20" fill="#22222A" />
                      <g clipPath="url(#clip0_1735_27047)">
                        <path
                          fillRule="evenodd"
                          clipRule="evenodd"
                          d="M8 12V27.9999C8 29.1044 8.89543 29.9999 10 29.9999L30 29.9998C31.1046 29.9998 32 29.1044 32 27.9998V12C32 10.8954 31.1046 10 30 10H10C8.89543 10 8 10.8954 8 12ZM9.99969 12V28L16.4493 28C16.1261 27.0838 16.0086 26.0419 16.0134 24.9999C16.0159 24.4477 16.4611 23.9999 17.0134 23.9999C17.5656 23.9999 18.0134 24.4477 18.0134 24.9999V19C18.0134 18.4477 18.4611 18 19.0134 18C19.5656 18 20.0134 18.4477 20.0134 19V23.2222C20.0134 22.6699 20.4611 22.2222 21.0134 22.2222C21.5656 22.2222 22.0134 22.6699 22.0134 23.2222V24C22.0134 23.4477 22.4611 23 23.0134 23C23.5656 23 24.0134 23.4477 24.0134 24V25.2222C24.0134 24.6699 24.4611 24.2222 25.0134 24.2222C25.5656 24.2222 26.0134 24.6699 26.0134 25.2222V27.2777C26.0134 27.531 25.9917 27.7719 25.9496 28.0001L29.9997 28.0001L29.9997 12H9.99969ZM20.4393 14.2099C19.7636 14.0084 19.053 13.9512 18.3542 14.0417C17.6554 14.1321 16.9819 14.3685 16.3788 14.7373C15.7756 15.1061 15.2556 15.5997 14.8561 16.1877C14.4564 16.7759 14.187 17.4443 14.0688 18.1487C13.9505 18.8531 13.9866 19.5742 14.1743 20.2629C14.3195 20.7958 14.8692 21.11 15.402 20.9648C15.9349 20.8196 16.2491 20.27 16.1039 19.7371C15.9923 19.3274 15.9708 18.8986 16.0412 18.4798C16.1115 18.061 16.2717 17.6629 16.5103 17.3118C16.7488 16.9607 17.06 16.665 17.4222 16.4436C17.7843 16.2221 18.1896 16.0797 18.6109 16.0251C19.0323 15.9706 19.4606 16.0051 19.8676 16.1265C20.2746 16.2479 20.6516 16.4536 20.973 16.7308C21.2945 17.008 21.5531 17.3505 21.7308 17.736C21.9084 18.1216 22.0007 18.5408 22.0007 18.9655C22.0007 19.5178 22.4484 19.9655 23.0007 19.9655C23.5529 19.9655 24.0007 19.5178 24.0007 18.9655C24.0007 18.251 23.8454 17.5463 23.5472 16.8991C23.2491 16.252 22.8157 15.6789 22.2792 15.2162C21.7427 14.7536 21.1151 14.4115 20.4393 14.2099Z"
                          fill="#F2F2F2"
                        />
                      </g>
                      <defs>
                        <clipPath id="clip0_1735_27047">
                          <rect
                            width="24"
                            height="24"
                            fill="white"
                            transform="translate(8 8)"
                          />
                        </clipPath>
                      </defs>
                    </svg>
                  )}

                  {platform === "vr" && (
                    <svg
                      width="40"
                      height="40"
                      viewBox="0 0 40 40"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <rect width="40" height="40" rx="20" fill="#22222A" />
                      <path
                        d="M12 24.3312V20.0004C12 17.7914 13.7908 16.0005 15.9999 16.0004L23.9999 16.0001C26.209 16.0001 28 17.791 28 20.0001V24.3312C28 25.8051 26.8051 27 25.3312 27C24.828 27 24.3281 26.9187 23.8509 26.7592L22.2187 26.2137C20.7787 25.7325 19.2213 25.7325 17.7813 26.2137L16.1491 26.7592C15.6719 26.9187 15.172 27 14.6688 27C13.1949 27 12 25.8051 12 24.3312Z"
                        fill="#F2F2F2"
                      />
                      <path
                        d="M15.7236 12.5528C15.893 12.214 16.2393 12 16.618 12H23.382C23.7607 12 24.107 12.214 24.2764 12.5528L24.6382 13.2764C24.8044 13.6088 24.5627 14 24.191 14H15.809C15.4373 14 15.1956 13.6088 15.3618 13.2764L15.7236 12.5528Z"
                        fill="#F2F2F2"
                      />
                      <path
                        d="M8.55279 24.2764C8.214 24.107 8 23.7607 8 23.382L8 20.618C8 20.2393 8.214 19.893 8.55279 19.7236L9.27639 19.3618C9.60884 19.1956 10 19.4373 10 19.809L10 24.191C10 24.5627 9.60884 24.8044 9.27639 24.6382L8.55279 24.2764Z"
                        fill="#F2F2F2"
                      />
                      <path
                        d="M31.4472 24.2764C31.786 24.107 32 23.7607 32 23.382L32 20.618C32 20.2393 31.786 19.893 31.4472 19.7236L30.7236 19.3618C30.3912 19.1956 30 19.4373 30 19.809L30 24.191C30 24.5627 30.3912 24.8044 30.7236 24.6382L31.4472 24.2764Z"
                        fill="#F2F2F2"
                      />
                    </svg>
                  )}

                  {platform === "mobile" && (
                    <svg
                      width="40"
                      height="40"
                      viewBox="0 0 40 40"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <rect width="40" height="40" rx="20" fill="#22222A" />
                      <path
                        fillRule="evenodd"
                        clipRule="evenodd"
                        d="M14.1667 10H25.8333C26.4777 10 27 10.4975 27 11.1111V28.8889C27 29.5025 26.4777 30 25.8333 30H14.1667C13.5223 30 13 29.5025 13 28.8889V11.1111C13 10.4975 13.5223 10 14.1667 10ZM20 29C19.4477 29 19 28.5523 19 28C19 27.4477 19.4477 27 20 27C20.5523 27 21 27.4477 21 28C21 28.5523 20.5523 29 20 29ZM25 12L15 12L15 26L25 26V12Z"
                        fill="#F2F2F2"
                      />
                    </svg>
                  )}
                </div>
              ))}
            </div>
          </div>

          <svg
            className="group-hover:scale-125 transition-transform"
            width="64"
            height="64"
            viewBox="0 0 64 64"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M54.285 30.971C55.0618 31.4371 55.0618 32.5629 54.285 33.029L17.8174 54.9096C17.0176 55.3895 16 54.8133 16 53.8806L16 10.1194C16 9.18667 17.0176 8.61054 17.8174 9.09044L54.285 30.971Z"
              fill="#F2F2F2"
            />
          </svg>
        </div>
      </div>

      <div className="p-8 space-y-2">
        <p className="font-gilroy 2xl:text-4xl sm:text-3xl text-2xl">{name}</p>
        <p className="text-[#ABABBA] 2xl:text-xl sm:text-lg text-base">
          {location}
        </p>
      </div>
    </div>
  );
}

export default RelevantExpCard;