/* eslint-disable no-nested-ternary */
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { FormInput } from '@blocklet/payment-react';
import { Stack, Typography } from '@mui/material';
import { useFormContext, useWatch } from 'react-hook-form';

import Uploader from '../uploader';
import EvmRpcInput from './evm-rpc-input';

export default function EthereumMethodForm({ checkDisabled }: { checkDisabled: (key: string) => boolean }) {
  const { t } = useLocaleContext();
  const { control, setValue } = useFormContext();
  const logo = useWatch({ control, name: 'logo' });

  const onUploaded = (result: any) => {
    if (!result.url) {
      setValue('logo', '');
      return;
    }
    const tmp = new URL(result.url);
    setValue('logo', tmp.pathname);
  };

  return (
    <>
      <FormInput
        key="name"
        name="name"
        type="text"
        rules={{ required: true }}
        label={t('admin.paymentMethod.name.label')}
        placeholder={t('admin.paymentMethod.name.tip')}
        disabled={checkDisabled('name')}
        inputProps={{ maxLength: 32 }}
      />
      <FormInput
        key="description"
        name="description"
        type="text"
        rules={{ required: true }}
        label={t('admin.paymentMethod.description.label')}
        placeholder={t('admin.paymentMethod.description.tip')}
        disabled={checkDisabled('description')}
        inputProps={{ maxLength: 255 }}
      />
      <EvmRpcInput
        name="settings.ethereum.api_host"
        label={t('admin.paymentMethod.ethereum.api_host.label')}
        placeholder={t('admin.paymentMethod.ethereum.api_host.tip')}
        disabled={checkDisabled('settings.ethereum.api_host')}
      />
      <FormInput
        key="explorer_host"
        name="settings.ethereum.explorer_host"
        type="text"
        rules={{ required: true }}
        label={t('admin.paymentMethod.ethereum.explorer_host.label')}
        placeholder={t('admin.paymentMethod.ethereum.explorer_host.tip')}
        disabled={checkDisabled('settings.ethereum.explorer_host')}
      />
      <FormInput
        key="native_symbol"
        name="settings.ethereum.native_symbol"
        type="text"
        rules={{ required: true }}
        label={t('admin.paymentMethod.ethereum.native_symbol.label')}
        placeholder={t('admin.paymentMethod.ethereum.native_symbol.tip')}
        disabled={checkDisabled('settings.ethereum.native_symbol')}
      />
      <FormInput
        key="confirmation"
        name="settings.ethereum.confirmation"
        type="number"
        rules={{ required: true }}
        label={t('admin.paymentMethod.ethereum.confirmation.label')}
        placeholder={t('admin.paymentMethod.ethereum.confirmation.tip')}
        disabled={checkDisabled('settings.ethereum.confirmation')}
      />
      <Stack direction="column">
        <Typography
          sx={{
            mb: 1,
          }}>
          {t('admin.paymentCurrency.logo.label')}
        </Typography>
        <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
      </Stack>
    </>
  );
}
