import { manaToUSD } from 'common/util/format'
import { useState } from 'react'
import { useUser } from 'web/hooks/use-user'
import { checkoutURL } from 'web/lib/service/stripe'
import { Button } from './button'
import { Modal } from './layout/modal'
import { FundsSelector } from './yes-no-selector'

export function AddFundsModal(props: {
  open: boolean
  setOpen(open: boolean): void
}) {
  const { open, setOpen } = props

  const user = useUser()

  const [amountSelected, setAmountSelected] = useState<1000 | 2500 | 10000>(
    2500
  )

  return (
    <Modal open={open} setOpen={setOpen} className="rounded-md bg-white p-8">
      <div className="mb-6 text-xl text-indigo-700">Get Mana</div>

      <div className="mb-6 text-gray-700">
        Buy mana (M$) to trade in your favorite markets. <br /> (Not redeemable
        for cash.)
      </div>

      <div className="mb-2 text-sm text-gray-500">Amount</div>
      <FundsSelector selected={amountSelected} onSelect={setAmountSelected} />

      <div className="mt-6">
        <div className="mb-1 text-sm text-gray-500">Price USD</div>
        <div className="text-xl">{manaToUSD(amountSelected)}</div>
      </div>

      <div className="modal-action">
        <Button color="gray-white" onClick={() => setOpen(false)}>
          Back
        </Button>

        <form
          action={checkoutURL(
            user?.id || '',
            amountSelected,
            window.location.href
          )}
          method="POST"
        >
          <Button type="submit" color="gradient">
            Checkout
          </Button>
        </form>
      </div>
    </Modal>
  )
}