/* eslint-disable no-nested-ternary */
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
import { get } from 'lodash';
import { Controller, useFormContext, useWatch } from 'react-hook-form';

export default function AfterPay() {
  const { t } = useLocaleContext();
  const {
    control,
    setValue,
    getValues,
    formState: { errors },
  } = useFormContext();
  const type = useWatch({ control, name: 'after_completion.type' });
  const nftMintEnabled = useWatch({ control, name: 'nft_mint_settings.enabled' });

  return (
    <Stack spacing={2} sx={{ width: '100%' }}>
      <Typography variant="h6" sx={{ fontWeight: 600 }}>
        {t('admin.paymentLink.confirmPage')}
      </Typography>
      <Controller
        name="after_completion.type"
        control={control}
        render={({ field }) => (
          <FormControlLabel
            control={
              <Checkbox
                checked={getValues().after_completion.type === 'hosted_confirmation'}
                {...field}
                onChange={(_, checked) => setValue(field.name, checked ? 'hosted_confirmation' : 'redirect')}
              />
            }
            label={t('admin.paymentLink.showConfirmPage')}
          />
        )}
      />
      {type === 'hosted_confirmation' && (
        <Controller
          name="after_completion.hosted_confirmation.custom_message"
          control={control}
          rules={{
            maxLength: {
              value: 200,
              message: t('common.maxLength', { len: 200 }),
            },
          }}
          render={({ field }) => (
            <TextField
              {...field}
              placeholder={t('admin.paymentLink.customMessage')}
              helperText={(get(errors, field.name)?.message as string) || t('admin.paymentLink.customMessageTip')}
              error={!!get(errors, field.name)}
              fullWidth
              size="small"
              slotProps={{
                htmlInput: {
                  maxLength: 200,
                },
              }}
            />
          )}
        />
      )}
      <Controller
        name="after_completion.type"
        control={control}
        render={({ field }) => (
          <FormControlLabel
            control={
              <Checkbox
                checked={getValues().after_completion.type === 'redirect'}
                {...field}
                onChange={(_, checked) => setValue(field.name, checked ? 'redirect' : 'hosted_confirmation')}
              />
            }
            label={t('admin.paymentLink.noConfirmPage')}
          />
        )}
      />
      {type === 'redirect' && (
        <Controller
          name="after_completion.redirect.url"
          control={control}
          rules={{
            maxLength: {
              value: 2048,
              message: t('common.maxLength', { len: 2048 }),
            },
          }}
          render={({ field }) => (
            <TextField
              placeholder="Redirect customers to your site"
              {...field}
              fullWidth
              size="small"
              error={!!get(errors, field.name)}
              helperText={get(errors, field.name)?.message as string}
            />
          )}
        />
      )}
      <Controller
        name="nft_mint_settings.enabled"
        control={control}
        render={({ field }) => (
          <FormControlLabel
            control={
              <Checkbox
                checked={getValues().nft_mint_settings.enabled}
                {...field}
                onChange={(_, checked) => setValue(field.name, checked)}
              />
            }
            label={t('admin.paymentLink.mintNft')}
          />
        )}
      />
      {nftMintEnabled && (
        <Controller
          name="nft_mint_settings.factory"
          control={control}
          rules={{
            maxLength: {
              value: 40,
              message: t('common.maxLength', { len: 40 }),
            },
          }}
          render={({ field }) => (
            <TextField
              {...field}
              placeholder={t('admin.paymentLink.mintNftFrom')}
              fullWidth
              size="small"
              error={!!get(errors, field.name)}
              helperText={get(errors, field.name)?.message as string}
            />
          )}
        />
      )}
    </Stack>
  );
}
