/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from 'react'
import styles from './buy-signal.module.scss'
import { router } from '@inertiajs/react'
import { MdClose } from 'react-icons/md'
// import { FaChevronDown } from 'react-icons/fa'


interface BuySignalModalProps {
  onClose: () => void;
  signal: any;
}

const BuySignalModal = ({ onClose, signal }: BuySignalModalProps) => {
  const [amount, setAmount] = useState(signal?.amount)

  interface formatAmountProps {
  [key: string]: any;
}

const formatAmount = (value: formatAmountProps) => {
    const numeric = value.replace(/[^0-9.]/g, '')
    if (!numeric) return ''
    const parts = numeric.split('.')
    const integer = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    return parts.length > 1 ? `${integer}.${parts[1].slice(0, 2)}` : integer
  }


  interface handleSubmitProps {
  [key: string]: any;
}

const handleSubmit = (e: handleSubmitProps) => {
    e.preventDefault()
    // const numeric = parseFloat(amount.replace(/,/g, ''))
    // if (!amount || isNaN(numeric)) return
  
    router.post('/signals/buy', {
      amount: signal?.price,
      winPercentage: signal?.percentage,
      signalName: signal?.name,
      category: 'trade',
      status: 'success'
    })
  }
  

  return (
    <div className={styles.modalOverlay}>
      <div className={styles.modalContent}>
        <button className={styles.closeBtn} onClick={onClose}>
          <MdClose size={22} />
        </button>

        <h2>Buy Trading Signal</h2>
        <p>Your wallet balance will be charged. If you have insufficient funds, please deposit funds to your wallet and proceed!</p>
        <form onSubmit={ handleSubmit }>
        <div className={styles.inputGroup}>
          <label htmlFor="deposit-amount">Amount in USD</label>
          <input
            required
            id="deposit-amount"
            type="text"
            disabled
            placeholder="Enter amount"
            value={Number(signal?.price).toLocaleString("en-US")}
            onChange={amount}
            className={styles.amountInput}
          />
        </div>

        <div className={ styles.notice }>
            {/* <MdNotifications size="2.5rem"/> */}
            <p>When you purchase a signal, you will be added to a dedicated group where you get access to premium trading signals to increase your profitability.</p>
        </div>

        <small>
          By clicking on the proceed button, you agree to our terms and conditions.
        </small>

        <button className={styles.proceedBtn}>
          Proceed to Pay
        </button>
        </form>
      </div>
    </div>
  )
}

export default BuySignalModal