/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './buy.module.scss'
import { useForm } from '@inertiajs/react'

interface BuyInvesmentProps {
  handleModalClose: () => void;
  asset: any;
}

const BuyInvesment = ({ handleModalClose, asset }: BuyInvesmentProps) => {
    const { pricePerUnit } = asset
    const {data, setData} = useForm({
        units: "5", 
        amount: "1000",
        payment_method: ""
    })

    const totalPrice = 1000 * Number(data.units)

    console.log(totalPrice)
  return (
    <div className={styles['dash__modal']}>
      <div className={styles['dash__modal__content']}>
        <div onClick={handleModalClose} className={styles['dash__modal__content--close']}>
          Close
        </div>
        <div className={styles['dash__modal__content--details']}>
          <div className={styles['dash__modal__content--details--header']}>
            <div className={styles['dash__modal__content--details--header--helper']}>
             Payment Method{' '}
            </div>
            <h2>Transaction Summary</h2>
            <p>
              This is the summary of the transaction you are about to carry out. Please confirm
              before you continue
            </p>
          </div>
          <div className={styles['dash__modal__content--details--transaction']}>
            <form action="">
                <div>
                    <label htmlFor="units">Units</label>
                    <select value={data.units} onChange={(e) => setData('units', e.target.value)}>
                        <option value=""selected disabled>Select number of units to purchase</option>
                        <option value="2">2 Units</option>
                        <option value="3">3 Units</option>
                        <option value="4">4 Units</option>
                        <option value="5">5 Units</option>
                        <option value="6">6 Units</option>
                        <option value="7">7 Units</option>
                        <option value="8">8 Units</option>
                        <option value="9">9 Units</option>
                        <option value="10">10 Units</option>
                    </select>
                </div>
                <div>
                    <label htmlFor="amount">Amount</label>
                    <input 
                        type="text" 
                        value={Number(totalPrice).toLocaleString("en-US")}
                    />
                </div>
            </form>
          </div>
          <div className={styles['dash__modal__content--details--instruction']}>
              <p>
                <strong>Instruction</strong> <br /> We only support crypto option for deposits at
                the moment. Please contact your account manager for payment details, pay and send a
                screenshot of your receipt to customer care
              </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default BuyInvesment