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

export default function CustomerCancelForm({ data }: { data: TSubscriptionExpanded }) {
  const { t } = useLocaleContext();
  const { control } = useFormContext();

  return (
    <Stack
      direction="column"
      spacing={1}
      sx={{
        alignItems: 'flex-start',
      }}>
      <Typography>
        {data.status === 'trialing'
          ? t('payment.customer.cancel.trialDescription')
          : t('payment.customer.cancel.description', { date: formatTime(data.current_period_end * 1000) })}
      </Typography>
      <Controller
        name="cancel.feedback"
        control={control}
        render={({ field }) => (
          <RadioGroup {...field} sx={{ ml: '5px !important' }}>
            <FormControlLabel
              value="too_expensive"
              control={<Radio checked={field.value === 'too_expensive'} />}
              label={t('payment.customer.cancel.feedback.too_expensive')}
            />
            <FormControlLabel
              value="missing_features"
              control={<Radio checked={field.value === 'missing_features'} />}
              label={t('payment.customer.cancel.feedback.missing_features', {
                date: formatTime(new Date(data.current_period_end * 1000)),
              })}
            />
            <FormControlLabel
              value="switched_service"
              control={<Radio checked={field.value === 'switched_service'} />}
              label={t('payment.customer.cancel.feedback.switched_service')}
            />
            <FormControlLabel
              value="unused"
              control={<Radio checked={field.value === 'unused'} />}
              label={t('payment.customer.cancel.feedback.unused')}
            />
            <FormControlLabel
              value="customer_service"
              control={<Radio checked={field.value === 'customer_service'} />}
              label={t('payment.customer.cancel.feedback.customer_service')}
            />
            <FormControlLabel
              value="too_complex"
              control={<Radio checked={field.value === 'too_complex'} />}
              label={t('payment.customer.cancel.feedback.too_complex')}
            />
            <FormControlLabel
              value="low_quality"
              control={<Radio checked={field.value === 'low_quality'} />}
              label={t('payment.customer.cancel.feedback.low_quality')}
            />
            <FormControlLabel
              value="other"
              control={<Radio checked={field.value === 'other'} />}
              label={t('payment.customer.cancel.feedback.other')}
            />
          </RadioGroup>
        )}
      />
      <Controller
        name="cancel.comment"
        control={control}
        rules={{
          maxLength: {
            value: 200,
            message: t('common.maxLength', { len: 200 }),
          },
        }}
        render={({ field }) => (
          <TextField
            variant="outlined"
            size="small"
            fullWidth
            multiline
            minRows={2}
            maxRows={4}
            placeholder={t('payment.customer.cancel.comment')}
            {...field}
            slotProps={{
              htmlInput: {
                maxLength: 200,
              },
            }}
          />
        )}
      />
    </Stack>
  );
}
