import {useState} from 'react'
import type {SubmitHandler} from 'react-hook-form'
import {useForm} from 'react-hook-form'

import useApiUrlStore from '../../../app/store/apiStore'
import {Modal, Toast} from '../../../components/mollecules'
import type {Account} from '../../../generated/ManagingApi'
import {AccountClient, AccountType, TradingExchanges,} from '../../../generated/ManagingApi'
import type {IAccountFormInput, IModalProps} from '../../../global/type.tsx'

const AccountModal: React.FC<IModalProps> = ({ showModal, toggleModal }) => {
  const [selectedExchange, setSelectedExchange] = useState<TradingExchanges>()
  const [selectedType, setSelectedType] = useState<AccountType>()
  const { register, handleSubmit } = useForm<IAccountFormInput>()
  const { apiUrl } = useApiUrlStore()

  async function createMoneyManagement(form: IAccountFormInput) {
    const t = new Toast('Creating account')
    const client = new AccountClient({}, apiUrl)
    const a: Account = {
      exchange: form.exchange,
      key: form.key,
      name: form.name,
      secret: form.secret,
      type: form.type,
    }
    await client
      .account_PostAccount(a)
      .then(() => {
        t.update('success', 'Account created')
      })
      .catch((err) => {
        t.update('error', 'Error :' + err)
      })
  }
  const onSubmit: SubmitHandler<IAccountFormInput> = async (form) => {
    // @ts-ignore
    toggleModal()
    await createMoneyManagement(form)
  }

  function setSelectedExchangeEvent(e: any) {
    setSelectedExchange(e.target.value)
  }

  function setSelectedTypeEvent(e: any) {
    setSelectedType(e.target.value)
  }

  return (
    <div>
      <Modal
        showModal={showModal}
        onSubmit={handleSubmit(onSubmit)}
        onClose={toggleModal}
        titleHeader={'Create Account'}
      >
        <div className="form-control">
          <div className="input-group">
            <label htmlFor="exchange" className="label mr-6">
              Exchange
            </label>
            <select
              className="select w-full max-w-xs"
              {...register('exchange', {
                onChange: (e) => {
                  setSelectedExchangeEvent(e)
                },
              })}
            >
              {Object.keys(TradingExchanges).map((item) => (
                <option key={item} value={item}>
                  {item}
                </option>
              ))}
            </select>
          </div>
        </div>

        <div className="form-control">
          <div className="input-group">
            <label htmlFor="name" className="label mr-6">
              Name
            </label>
            <input
              style={{ color: 'black' }}
              className="w-full max-w-xs"
              {...register('name')}
            ></input>
          </div>
        </div>

        <div className="form-control">
          <div className="input-group">
            <label htmlFor="type" className="label mr-6">
              Type
            </label>
            <select
              className="select w-full max-w-xs"
              {...register('type', {
                onChange: (e) => {
                  setSelectedTypeEvent(e)
                },
              })}
            >
              {Object.keys(AccountType).map((item) => (
                <option key={item} value={item}>
                  {item}
                </option>
              ))}
            </select>
          </div>
        </div>

        {(selectedExchange != TradingExchanges.Evm && selectedType != AccountType.Trader ) || 
        (selectedExchange == TradingExchanges.Evm && selectedType == AccountType.Privy )? (
          <>
            <div className="form-control">
              <div className="input-group">
                <label htmlFor="key" className="label mr-6">
                  Key
                </label>
                <input
                  style={{ color: 'black' }}
                  className="w-full max-w-xs"
                  {...register('key')}
                ></input>
              </div>
            </div>

            <div className="form-control">
              <div className="input-group">
                <label htmlFor="secret" className="label mr-6">
                  Secret
                </label>
                <input
                  style={{ color: 'black' }}
                  className="w-full max-w-xs"
                  {...register('secret')}
                ></input>
              </div>
            </div>
          </>
        ) : null}

        {selectedExchange == TradingExchanges.Evm &&
        selectedType == AccountType.Watch ? (
          <>
            <div className="form-control">
              <div className="input-group">
                <label htmlFor="key" className="label mr-6">
                  Key
                </label>
                <input
                  style={{ color: 'black' }}
                  className="w-full max-w-xs"
                  {...register('key')}
                ></input>
              </div>
            </div>
          </>
        ) : null}

        <div className="modal-action">
          <button type="submit" className="btn">
            Build
          </button>
        </div>
      </Modal>
    </div>
  )
}

export default AccountModal
