import React, { useState, useEffect } from "react";
import { IInventoryItem, IStake, IUpgrade } from "typings";
import CardLayout from "../../Layouts/CardLayout";
import Image from "next/image";
const InventoryItem = (props: {
  inventoryItem: IInventoryItem;
  stakes: IStake[] | null;
  upgradeInventoryItem: (inventoryItemId: string, storeItemId: number) => void;
}) => {
  const [currentTierIndex, setCurrentTierIndex] = useState(
    props.inventoryItem.currentTierIndex
  );
  const [currentUpgrade, setCurrentUpgrade] = useState<IUpgrade | null>(null);

  useEffect(() => {
    const index = props.inventoryItem.currentTierIndex;
    setCurrentTierIndex(index);
    const currentUpdade = props.inventoryItem.storeItem.upgrades[index];
    setCurrentUpgrade(currentUpdade);
  }, [props.inventoryItem]);

  const isInUse = () => {
    if (!props.stakes) return false;
    return props.stakes.some((stake) => {
      stake.inventoryItemId === props.inventoryItem.id;
    });
  };

  const getNextUpgradePrice = () => {
    if (currentTierIndex === 4) return "Maxed";
    return `$${
      props.inventoryItem.storeItem.upgrades[currentTierIndex + 1].price
    }`;
  };
  return (
    <CardLayout>
      <div className="md:flex gap-4">
        <div className="flex-1">
          <h3 className="text-2xl font-bold mb-2">
            {props.inventoryItem.storeItem.name}
          </h3>
          <p className="text-sm mb-3">
            {props.inventoryItem.storeItem.description}
          </p>
          <p className="font-bold mt-4">Base Yield</p>
          <p>{props.inventoryItem.storeItem.claimAmount}</p>
          <p className="font-bold mb-1 mt-4">Tier</p>
          <div className="flex items-center">
            {currentUpgrade &&
              props.inventoryItem.storeItem.upgrades.map((upgrade, id) => {
                if (upgrade.tier <= currentUpgrade.tier) {
                  return (
                    <span key={id} className="bg-green-600 px-4 py-2"></span>
                  );
                } else {
                  return (
                    <span key={id} className="bg-slate-200 px-4 py-2"></span>
                  );
                }
              })}
            <p className="font-bold ml-1">
              (+{currentUpgrade && currentUpgrade.claimBoost})
            </p>
          </div>
          <p className="font-bold mb-1 mt-4">Upgrade</p>
          <div className="flex items-center">
            {isInUse() ? (
              <button className="bg-slate-400 text-slate-600 px-4 py-2 rounded-lg font-bold text-center cursor-not-allowed">
                In Use
              </button>
            ) : (
              <button
                onClick={() =>
                  props.upgradeInventoryItem(
                    props.inventoryItem.id,
                    props.inventoryItem.storeItem.id
                  )
                }
                className="bg-green-600 rounded-full p-1"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth={2.5}
                  stroke="currentColor"
                  className="w-6 h-6"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"
                  />
                </svg>
              </button>
            )}
            <span className="ml-1">({getNextUpgradePrice()})</span>
          </div>
        </div>
        <div className="relative object-contain w-48 h-48 mt-4 md:mt-0">
          <Image
            src={"/assets/items/" + props.inventoryItem.storeItem.image}
            alt={props.inventoryItem.storeItem.name}
            fill
            className="rounded-lg border border-white/20 shadow-lg object-contain"
          />
        </div>
      </div>
    </CardLayout>
  );
};

export default InventoryItem;
