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

const ResourceModal = (props: {
  resourceAccount: IResourceAccount;
  conversionPair: IConversionPair | undefined;
  handleConversionPair: (amount: number, resourceType: string) => void;
}) => {
  const [error, setError] = useState("");

  const handleAmountChange = (
    e: React.ChangeEvent<HTMLInputElement>,
    resourceType: string
  ) => {
    console.log("Changing amount");
    const amount = Number(e.target.value);
    if (amount <= props.resourceAccount.balance) {
      props.handleConversionPair(amount, resourceType);
      if (error) setError("");
    } else {
      setError("You don't have enough");
    }
  };
  return (
    <div
      className={
        resourceToBg(props.resourceAccount.resourceType) +
        " bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3"
      }
    >
      <div className="text-white mr-4">
        <span
          className={
            resourceToFc(props.resourceAccount.resourceType) + " font-bold"
          }
        >
          {props.resourceAccount.resourceType}
        </span>
        <h3 className="md:text-2xl font-bold">
          {props.resourceAccount.balance.toLocaleString("en-US", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          })}{" "}
          kg
        </h3>
      </div>
      <div className="text-white mt-4">
        <div className="flex">
          <span>
            <span
              className={
                resourceToFc(props.resourceAccount.resourceType) + " font-bold"
              }
            >
              Amount
            </span>
            <h3 className="md:text-2xl font-bold">
              {props.conversionPair
                ? props.conversionPair.resourceAmount.toLocaleString("en-US", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : 0}{" "}
              kg.
            </h3>
          </span>

          <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 mt-4 mx-4"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
            />
          </svg>
          <span>
            <span
              className={
                resourceToFc(props.resourceAccount.resourceType) + " font-bold"
              }
            >
              Moonbucks
            </span>
            <h3 className="md:text-2xl font-bold">
              $
              {props.conversionPair
                ? props.conversionPair.moneyAmount.toLocaleString("en-US", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : 0}
            </h3>
          </span>
        </div>
      </div>
      <div className="flex flex-col">
        {error && (
          <span className="text-red-500 font-bold mb-1 text-sm">{error}</span>
        )}
        <input
          type="text"
          className="bg-white px-4 py-2 mr-2 mt-4 rounded-lg h-full"
          placeholder="0"
          onChange={(e) =>
            handleAmountChange(e, props.resourceAccount.resourceType)
          }
        />
      </div>
    </div>
  );
};

export default ResourceModal;
