import React, { useState } from "react";
import { Tabs } from "react-daisyui";
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import MoreIcon from "../moreInfo";
import PrimeLootButton from "../primeDropdown/primeLootButton";
import PrimeLootDesc from "../primeDropdown/primeLootDesc";
import PrimeLootTitle from "../primeDropdown/primeLootTitle";
import PrimeTabs from "../primeTabs";
import PrimeGames from "../../../../primeGames.json";
import Slider from "../slider";
import PrimeLogo from "../../buttons/primeLogo";
import TooltipBottom from "../../../utils/helpers/tooltipBottom";
import classNames from "../../../utils/helpers/className";

function RewardButton() {
  const AllGames = () => {
    return PrimeGames.map((game, index) => {
      if (game.id < 5) {
        return (
          <div
            key={`primeGame-${index}`}
            className="flex flex-col flex-wrap items-center justify-center px-3 py-1"
          >
            <div className="w-11/12">
              <p className=" pt-2 text-left text-[0.7rem] font-semibold leading-3 text-[#adadb8]">
                {game.name}
              </p>
              <p className="pb-1 pt-1 text-[0.925rem] leading-[1.35rem] text-slate-200">
                {game.desc}
              </p>
              <div className="flex flex-col items-center justify-center">
                <img
                  className="rounded-md object-fill"
                  src={game.pic}
                  alt={game.name}
                  id={game.id.toString()}
                />
              </div>
              <div className="flex flex-col items-start justify-center">
                <a className="pt-2 pb-1 text-[0.7rem] leading-3 text-[#efeff1]">
                  In-Game Content
                </a>
                <a className="text-[0.65rem] leading-3 text-[#adadb8]">
                  {game.company}
                </a>
              </div>
            </div>
          </div>
        );
      } else {
        return null;
      }
    });
  };

  const FreeGames = () => {
    return PrimeGames.map((game, index) => {
      if (game.id > 4) {
        return (
          <div
            key={`freeGame-${index}`}
            className="flex flex-col flex-wrap items-center justify-center px-1 py-1"
          >
            <div className="w-11/12">
              <p className=" text-left text-[0.7rem] text-slate-500">
                {game.name}
              </p>
              <p className="text-[0.925rem] text-slate-200">{game.desc}</p>
              <div className="flex flex-col items-center justify-center">
                <img
                  className="h-48"
                  src={game.pic}
                  alt={game.name}
                  id={game.id.toString()}
                />
              </div>
              <div className="flex flex-col items-center justify-center">
                <a>In-Game Content</a>
                <a className="text-sm">{game.company}</a>
              </div>
            </div>
          </div>
        );
      } else {
        return null;
      }
    });
  };

  const EndingSoonGames = () => {
    return PrimeGames.map((game, index) => {
      if (game.id % 2 !== 0) {
        return (
          <div
            key={`soonGames-${index}`}
            className="flex flex-col flex-wrap items-center justify-center px-1 py-1"
          >
            <div className="w-11/12">
              <p className=" text-left text-[0.7rem] leading-4 text-slate-500">
                {game.name}
              </p>
              <p className="pb-1 text-[0.925rem] font-semibold leading-6 text-slate-200">
                {game.desc}
              </p>
              <div className="flex flex-col items-center justify-center">
                <img
                  className="rounded-md object-fill"
                  src={game.pic}
                  alt={game.name}
                  id={game.id.toString()}
                />
              </div>
              <div className="flex flex-col items-center justify-center">
                <a>In-Game Content</a>
                <a className="text-sm">{game.company}</a>
              </div>
            </div>
          </div>
        );
      } else {
        return null;
      }
    });
  };
  return (
    <Menu>
      {({ open }) => (
        <>
          <div className=" relative flex flex-col items-center justify-center">
            <Menu.Button>
              <TooltipBottom
                text={<PrimeLogo />}
                tip={"New Prime Loot"}
                opened={open}
                special={true}
              />
              {/* <PrimeLogo /> */}
              {/* <a>
            <svg
              className="w-6"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
            >
              <path
                fill="#FFFFFF"
                d="M12 8L15 13.2L18 10.5L17.3 14H6.7L6 10.5L9 13.2L12 8M12 4L8.5 10L3 5L5 16H19L21 5L15.5 10L12 4M19 18H5V19C5 19.6 5.4 20 6 20H18C18.6 20 19 19.6 19 19V18Z"
              />
            </svg>
          </a> */}
            </Menu.Button>
          </div>

          {/* scrollbar-hide */}
          <div
            className={classNames(
              open ? "ring-1 ring-black ring-opacity-5" : " ring-0",
              "absolute right-32 top-6 z-50 mt-2 w-[20rem]  origin-top-right divide-y divide-gray-100 rounded-md  bg-[#1f1f23] shadow-lg focus:outline-none    xl:max-h-[calc(100vh-4.2rem)]"
            )}
          >
            <Transition
              as={Fragment}
              enter="transition ease-out duration-100"
              enterFrom="transform opacity-0 scale-95"
              enterTo="transform opacity-100 scale-100"
              leave="transition ease-in duration-75"
              leaveFrom="transform opacity-100 scale-100"
              leaveTo="transform opacity-0 scale-95"
            >
              <Menu.Items className="flex  w-full flex-col flex-wrap overflow-y-auto   shadow-lg focus:outline-none">
                <Menu.Item disabled>
                  <div className="bg-[#1f1f23]] sticky top-0 w-full">
                    <div>
                      <PrimeLootTitle />
                    </div>
                  </div>
                </Menu.Item>
                <div className="flex max-h-screen w-full flex-col items-center justify-around ">
                  <div className="border-b-3 flex w-full flex-col items-center  px-3 pb-2">
                    <Menu.Item disabled>
                      <div className="flex w-11/12 flex-col items-center justify-center">
                        <PrimeLootDesc />
                      </div>
                    </Menu.Item>
                    <Menu.Item disabled>
                      <div className="w-11/12">
                        <PrimeLootButton />
                      </div>
                    </Menu.Item>
                  </div>
                  <Menu.Item
                    disabled
                    as="div"
                    className="flex w-full border-t-[rgba(83,83,95)]"
                  >
                    <div className=" flex h-full max-h-[calc(100vw-3rem)] w-[20rem] overflow-y-scroll scrollbar-hide">
                      <div className="  flex h-full w-full flex-col items-start justify-start ">
                        <Slider
                          allCards={AllGames}
                          freeCards={FreeGames}
                          soonCards={EndingSoonGames}
                        />
                      </div>
                    </div>
                  </Menu.Item>
                </div>
              </Menu.Items>
            </Transition>
          </div>
        </>
      )}
    </Menu>
  );
}
export default RewardButton;