import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import type { TSubscriptionExpanded } from '@blocklet/payment-types';
import { Box, TextField, styled } from '@mui/material';
import { Controller, useFormContext } from 'react-hook-form';

export default function SlashStakeForm({ data, stakeValue }: { data: TSubscriptionExpanded; stakeValue: string }) {
  const { t } = useLocaleContext();
  const { control, formState } = useFormContext();

  return (
    <Root sx={{ width: 400 }}>
      {t('admin.subscription.cancel.staking.slashTip', {
        unused: stakeValue,
        symbol: data.paymentCurrency?.symbol,
      })}
      <Controller
        name="slashStake.slashReason"
        control={control}
        rules={{
          required: t('common.required'),
          validate: (value) => {
            return value.trim() !== '' || t('common.required');
          },
        }}
        render={({ field }) => (
          <TextField
            {...field}
            variant="outlined"
            size="small"
            fullWidth
            multiline
            minRows={2}
            maxRows={4}
            placeholder={t('admin.subscription.cancel.staking.slashReason')}
            error={!!(formState.errors as any)?.slashStake?.slashReason}
            helperText={(formState.errors as any)?.slashStake?.slashReason?.message}
            sx={{ mt: 1 }}
            slotProps={{
              htmlInput: {
                maxLength: 200,
              },
            }}
          />
        )}
      />
    </Root>
  );
}

const Root = styled(Box)`
  .form-title {
    width: 60px;
  }
`;
