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

  useEffect(() => {
    const index = props.inventoryItem.currentTierIndex;
    setCurrentTierIndex(index);
    setCurrentUpgrade(props.inventoryItem.storeItem.upgrades[index]);
  }, [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="flex gap-4">
        <div className="flex-1">
          <h3 className="text-xl font-bold mb-2">
            {props.inventoryItem.storeItem.name}
          </h3>
          <p className="text-sm mb-3">
            {props.inventoryItem.storeItem.description}
          </p>
          <div className="flex">
            {props.inventoryItem.storeItem.upgrades.map((upgrade, id) => {
              if (upgrade.tier <= currentUpgrade.tier) {
                return (
                  <span
                    key={id}
                    className="bg-green-600 px-2 py-2 border border-black"
                  ></span>
                );
              } else {
                return (
                  <span
                    key={id}
                    className="bg-slate-200 px-2 py-2 border border-black"
                  ></span>
                );
              }
            })}
          </div>
          <p className="font-bold mt-4">Yield</p>
          <p>
            {props.inventoryItem.storeItem.claimAmount} +{" "}
            {currentUpgrade.claimBoost}
          </p>
          <div className="">
            <div className="py-4 my-2">
              {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-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold text-center"
                >
                  Upgrade | {getNextUpgradePrice()}
                </button>
              )}
            </div>
          </div>
        </div>
        <div className="relative object-contain w-48 h-48">
          <Image
            src={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;
