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

'use client'

import { useState } from 'react'
import { usePage } from '@inertiajs/react'

import styles from './transaction.module.scss'

// import TransactionSummary from '../Modals/TransactionSummary'

import { formatDate } from '@/lib/utils/format-date'
import { formatMoneyComplete } from '@/lib/utils/format-money'

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

const TransactionCard = ({
  transaction,
}: any) => {
  const [summaryModal, setSummaryModal] =
    useState(false)

  const {
    type,
    amount,
    created_at,
    meta,
  } = transaction

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

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

  const toggleSummaryModal = () => {
    setSummaryModal(!summaryModal)
  }

  /**
   * Determine credit/debit
   */

  const isCredit = (() => {
    if (type === 'deposit') {
      return true
    }

    if (type === 'profit') {
      return meta?.direction !== 'debit'
    }

    return false
  })()

  /**
   * Transaction label
   */

  const transactionLabel = (() => {
    if (type === 'deposit') {
      return 'Wallet Credit'
    }

    if (type === 'withdrawal') {
      return 'Withdrawal'
    }

    if (type === 'profit') {
      return meta?.direction === 'debit'
        ? 'ROI Debit'
        : 'ROI Credit'
    }

    if (type === 'admin') {
      return 'Platform'
    }

    return (
      type?.charAt(0).toUpperCase() +
      type?.slice(1)
    )
  })()

  return (
    <>
      {/* {summaryModal && (
        <TransactionSummary
          transaction={transaction}
          handleModalClose={
            toggleSummaryModal
          }
        />
      )} */}

      <div
        onClick={toggleSummaryModal}
        className={
          styles['single__transaction']
        }
      >
        {/* Status */}

        <div>
          <span
            className={
              isCredit
                ? styles[
                    'single__transaction__credit'
                  ]
                : styles[
                    'single__transaction__debit'
                  ]
            }
          >
            {isCredit
              ? 'Credit'
              : 'Debit'}
          </span>
        </div>

        {/* Transaction Info */}

        <div
          className={
            styles[
              'single__transaction__grid2'
            ]
          }
        >
          <p>{transactionLabel}</p>

          <small>
            {formatDate(created_at)}
          </small>
        </div>

        {/* Amount */}

        <div
          className={
            styles[
              'single__transaction__grid3'
            ]
          }
        >
          <p
            className={
              isCredit
                ? styles['credit']
                : styles['debit']
            }
          >
            {currency?.currency_symbol}
            {formatMoneyComplete(amount)}
          </p>
        </div>

        <div />
      </div>
    </>
  )
}

export default TransactionCard