import { ModalProps } from '../../types/modal'
import Modal from '../shared/Modal'
import { useState } from 'react'
import TabUnderline from '@components/shared/TabUnderline'
import DepositForm from '@components/DepositForm'
import WithdrawForm from '@components/WithdrawForm'
import { ACCOUNT_ACTION_MODAL_HEIGHT } from 'utils/constants'

interface DepositWithdrawModalProps {
  action: 'deposit' | 'withdraw'
  token?: string
}

type ModalCombinedProps = DepositWithdrawModalProps & ModalProps

const DepositWithdrawModal = ({
  action,
  isOpen,
  onClose,
  token,
}: ModalCombinedProps) => {
  const [activeTab, setActiveTab] = useState(action)

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <div style={{ height: ACCOUNT_ACTION_MODAL_HEIGHT }}>
        <div className="pb-2">
          <TabUnderline
            activeValue={activeTab}
            values={['deposit', 'withdraw']}
            onChange={(v) => setActiveTab(v)}
          />
        </div>
        {activeTab === 'deposit' ? (
          <DepositForm onSuccess={onClose} token={token} />
        ) : null}
        {activeTab === 'withdraw' ? (
          <WithdrawForm onSuccess={onClose} token={token} />
        ) : null}
      </div>
    </Modal>
  )
}

export default DepositWithdrawModal
