MoonMiners/src/app/Components/Accounts/Account.tsx

"use client";
import React, { useEffect, useState } from "react";
import { IResourceAccount, IConversionPair, IGameConfig } from "typings";
import { resourceToFc, resourceToBg } from "../../../utils/helpers";
import ResourceModal from "./ResourceModal";

const ResourceAccount = (props: {
  account: IResourceAccount;
  sellResource: (pairs: IConversionPair[]) => void;
  gameConfig: IGameConfig | undefined;
}) => {
  const [showModal, setShowModal] = useState(false);
  const [conversionPair, setConversionPair] = useState<
    IConversionPair | undefined
  >(undefined);
  const [conversionRate, setConversionRate] = useState<number>(0);

  const handleConversionPair = (amount: number, resourceType: string) => {
    const updatedPair = {
      resourceType: resourceType,
      resourceAmount: amount,
      moneyAmount: amount / conversionRate,
    };
    setConversionPair(updatedPair);
  };

  const getConversionRate = (account: IResourceAccount) => {
    if (props.gameConfig === undefined) return 0;
    const query = account.resourceType + "ToMoonbucks";
    const rate = props.gameConfig.gameConstants[query];
    return rate;
  };

  const handleSellResource = () => {
    conversionPair && props.sellResource([conversionPair]);
    setShowModal(false);
  };

  useEffect(() => {
    const rate = getConversionRate(props.account);
    setConversionRate(rate);
  }, [props.gameConfig]);

  return (
    <>
      {showModal && (
        <div className="z-10 fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
          <div className="p-8 relative w-96">
            <button
              onClick={() => {
                setShowModal(!showModal);
              }}
              className="text-white absolute top-0 hover:cursor-pointer"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={2}
                stroke="currentColor"
                className="w-6 h-6"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
            <div className="md:h-auto max-w-md max-h-full overflow-y-auto">
              <ResourceModal
                resourceAccount={props.account}
                conversionPair={conversionPair}
                handleConversionPair={handleConversionPair}
              />
              {
                <div className="mt-2 bg-white rounded-lg p-3">
                  <p className="mb-0 text-2xl font-bold text-black">
                    Grand total
                  </p>
                  <p className="mb-2 text-2xl font-bold underline text-green-700">
                    ${" "}
                    {conversionPair
                      ? conversionPair.moneyAmount.toLocaleString("en-US", {
                          minimumFractionDigits: 2,
                          maximumFractionDigits: 2,
                        })
                      : 0}
                  </p>
                  {conversionPair && (
                    <button
                      onClick={() => handleSellResource()}
                      className="bg-green-700 py-2 text-slate-900 rounded-lg font-bold w-28 text-center text-white"
                    >
                      Sell Now
                    </button>
                  )}
                </div>
              }
            </div>
          </div>
        </div>
      )}
      <div className="flex-1 md:mb-0 mb-2 h-auto p-1 rounded-xl">
        <div
          className={
            "bg-gradient-to-br hover:bg-gradient-to-tr " +
            resourceToBg(props.account.resourceType) +
            " relative text-white px-8 py-4 rounded-xl"
          }
        >
          <span
            className={resourceToFc(props.account.resourceType) + " font-bold"}
          >
            {props.account.resourceType}
          </span>
          <h3 className="text-2xl font-bold">
            {props.account.balance.toLocaleString("en-US", {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })}{" "}
            kg
          </h3>
          <div className="absolute right-0 top-0 mt-4 mr-4 hover:cursor-pointer">
            <div
              className="flex"
              onClick={() => {
                setShowModal(!showModal);
              }}
            >
              <span className="mr-2">Sell</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
                className="w-6 h-6"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ResourceAccount;