import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { FormInput } from '@blocklet/payment-react';
import { Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
import { Controller, useFormContext } from 'react-hook-form';

export default function AppStoreMethodForm({ checkDisabled }: { checkDisabled: (key: string) => boolean }) {
  const { t } = useLocaleContext();
  const { control } = useFormContext();

  return (
    <>
      <FormInput
        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
        name="description"
        type="text"
        rules={{ required: true }}
        label={t('admin.paymentMethod.description.label')}
        placeholder={t('admin.paymentMethod.description.tip')}
        inputProps={{ maxLength: 255 }}
      />
      <FormInput
        name="settings.app_store.bundle_id"
        type="text"
        rules={{ required: true }}
        label={t('admin.paymentMethod.app_store.bundle_id.label')}
        placeholder={t('admin.paymentMethod.app_store.bundle_id.tip')}
        disabled={checkDisabled('settings.app_store.bundle_id')}
      />

      <Stack spacing={0.5}>
        <Typography variant="body2">{t('admin.paymentMethod.app_store.environment.label')}</Typography>
        <Controller
          name="settings.app_store.environment"
          control={control}
          rules={{ required: true }}
          render={({ field }) => (
            <ToggleButtonGroup
              {...field}
              exclusive
              disabled={checkDisabled('settings.app_store.environment')}
              onChange={(_, value: string | null) => {
                if (value !== null) field.onChange(value);
              }}>
              <ToggleButton value="production">
                {t('admin.paymentMethod.app_store.environment.production')}
              </ToggleButton>
              <ToggleButton value="sandbox">{t('admin.paymentMethod.app_store.environment.sandbox')}</ToggleButton>
            </ToggleButtonGroup>
          )}
        />
        <Typography variant="caption" color="text.secondary">
          {t('admin.paymentMethod.app_store.environment.tip')}
        </Typography>
      </Stack>

      <FormInput
        name="settings.app_store.shared_secret"
        type="password"
        label={t('admin.paymentMethod.app_store.shared_secret.label')}
        placeholder={t('admin.paymentMethod.app_store.shared_secret.tip')}
        disabled={checkDisabled('settings.app_store.shared_secret')}
      />

      <Typography variant="subtitle2" sx={{ mt: 2 }}>
        {t('admin.paymentMethod.app_store.serverApi.heading')}
      </Typography>
      <Typography variant="caption" color="text.secondary" sx={{ mt: -1, display: 'block' }}>
        {t('admin.paymentMethod.app_store.serverApi.tip')}
      </Typography>
      <FormInput
        name="settings.app_store.issuer_id"
        type="text"
        label={t('admin.paymentMethod.app_store.issuer_id.label')}
        placeholder={t('admin.paymentMethod.app_store.issuer_id.tip')}
        disabled={checkDisabled('settings.app_store.issuer_id')}
      />
      <FormInput
        name="settings.app_store.key_id"
        type="text"
        label={t('admin.paymentMethod.app_store.key_id.label')}
        placeholder={t('admin.paymentMethod.app_store.key_id.tip')}
        disabled={checkDisabled('settings.app_store.key_id')}
      />
      <FormInput
        name="settings.app_store.private_key_pem"
        type="text"
        multiline
        rows={5}
        label={t('admin.paymentMethod.app_store.private_key_pem.label')}
        placeholder={t('admin.paymentMethod.app_store.private_key_pem.tip')}
        disabled={checkDisabled('settings.app_store.private_key_pem')}
      />
    </>
  );
}
