import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { FormControlLabel, Radio, RadioGroup, Stack, TextField, Typography } from '@mui/material';
import { Controller, useFormContext, useWatch } from 'react-hook-form';

export default function SubscriptionPauseForm() {
  const { t } = useLocaleContext();
  const { control, formState } = useFormContext();
  const isCustom = useWatch({ control, name: 'pause.type' }) === 'custom';

  return (
    <Stack direction="column" spacing={3} sx={{ width: 400 }}>
      <Stack
        direction="row"
        spacing={3}
        sx={{
          alignItems: 'flex-start',
        }}>
        <Typography
          sx={{
            flex: 1,
          }}>
          {t('admin.subscription.pause.type.title')}
        </Typography>
        <Stack
          sx={{
            flex: 2,
          }}>
          <Controller
            name="pause.type"
            control={control}
            render={({ field }) => (
              <RadioGroup {...field}>
                <FormControlLabel
                  value="never"
                  control={<Radio checked={field.value === 'never'} />}
                  label={t('admin.subscription.pause.type.never')}
                />
                <FormControlLabel
                  value="custom"
                  control={<Radio checked={field.value === 'custom'} />}
                  label={t('admin.subscription.pause.type.custom')}
                />
              </RadioGroup>
            )}
          />
          {isCustom && (
            <Controller
              name="pause.resumesAt"
              control={control}
              render={({ field }) => (
                <TextField
                  size="small"
                  variant="outlined"
                  type="datetime-local"
                  {...field}
                  // @ts-ignore
                  error={!!formState.errors.pause?.resumesAt}
                  // @ts-ignore
                  helperText={formState.errors.pause?.resumesAt?.message as string}
                />
              )}
            />
          )}
        </Stack>
      </Stack>
      <Stack
        direction="row"
        spacing={3}
        sx={{
          alignItems: 'flex-start',
        }}>
        <Typography
          sx={{
            flex: 1,
          }}>
          {t('admin.subscription.pause.behavior.title')}
        </Typography>
        <Stack
          sx={{
            flex: 2,
          }}>
          <Controller
            name="pause.behavior"
            control={control}
            render={({ field }) => (
              <RadioGroup {...field}>
                <FormControlLabel
                  value="keep_as_draft"
                  control={<Radio checked={field.value === 'keep_as_draft'} />}
                  label={t('admin.subscription.pause.behavior.keep_as_draft')}
                />
                <FormControlLabel
                  value="mark_uncollectible"
                  control={<Radio checked={field.value === 'mark_uncollectible'} />}
                  label={t('admin.subscription.pause.behavior.mark_uncollectible')}
                />
                <FormControlLabel
                  value="void"
                  control={<Radio checked={field.value === 'void'} />}
                  label={t('admin.subscription.pause.behavior.void')}
                />
              </RadioGroup>
            )}
          />
        </Stack>
      </Stack>
    </Stack>
  );
}
