/* eslint-disable @typescript-eslint/no-explicit-any */

"use client";

import { useState } from "react";
import styles from "./transaction.module.scss";

import { formatDate } from "@/lib/utils/format-date";
import { capitalizeFirstLetter } from "@/lib/utils/capitalise-first-letter";

import { usePage } from "@inertiajs/react";

import currencyData from "../../../../data/countries-currencies.json";

import { formatMoneyComplete } from "@/lib/utils/format-money";

import WithdrawalDetailsModal from "@/components/admin/Modals/WithdrawalDetailsModal";

const Transaction = ({ transaction }: any) => {
  const {
    amount,
    created_at,
    status,
    channel,
    type,
  } = transaction;

  const { appSettings } = usePage().props as any;

  const currency = currencyData.find(
    (item) => item.currency_code === appSettings?.base_currency
  );

  const [showDetails, setShowDetails] = useState(false);

  const [selectedWithdrawal, setSelectedWithdrawal] =
    useState<any>(null);

  const toggleDetailsModal = (withdrawal: any) => {
    setSelectedWithdrawal(withdrawal);
    setShowDetails(!showDetails);
  };

  const getTypeClass = () => {
    switch (type?.toLowerCase()) {
      case "deposit":
        return styles.transactionTypeDeposit;

      case "withdrawal":
        return styles.transactionTypeWithdrawal;

      case "transfer":
        return styles.transactionTypeTransfer;

      default:
        return styles.transactionTypeProfit;
    }
  };

  return (
    <>
      {showDetails && (
        <WithdrawalDetailsModal
          withdrawal={selectedWithdrawal}
          closeModal={() => setShowDetails(false)}
        />
      )}

      <div className={styles.transaction}>
        {/* Transaction Type */}
        <div className={styles.transactionIdentity}>
          <div
            className={`${styles.transactionIcon} ${getTypeClass()}`}
          />

          <div className={styles.transactionInfo}>
            <h4>
              {capitalizeFirstLetter(type)}
            </h4>

            <span>
              Transaction
            </span>
          </div>
        </div>

        {/* Amount */}
        <span className={styles.amount}>
          {currency?.currency_symbol}
          {formatMoneyComplete(amount)}
        </span>

        {/* Channel */}
        <span className={styles.amount}>
          {channel === "admin"
            ? "ROI"
            : capitalizeFirstLetter(channel)}
        </span>

        {/* Date */}
        <span className={styles.amount}>
          {formatDate(created_at)}
        </span>

        {/* Status */}
        <span
          className={
            status === "success"
              ? styles["transaction--success"]
              : styles["transaction--failed"]
          }
        >
          {status === "success"
            ? "Confirmed"
            : "Pending"}
        </span>

        {/* Action */}
        <span>
          <button
            onClick={() =>
              toggleDetailsModal(transaction)
            }
            className={styles.actionButtonView}
          >
            Details
          </button>
        </span>
      </div>
    </>
  );
};

export default Transaction;