import { type ReactNode } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

import { resolveBankAccountSectionState } from './bankAccountSectionState';

export type BankAccountSectionTranslations = {
  title: string;
  label: string;
  placeholder: string;
  helperText: string;
  errorRequired: string;
  errorInvalid: string;
  bankLabel: string;
  bankPlaceholder: string;
  bankErrorRequired: string;
  bankErrorMinLength: string;
};

export type BankAccountSectionProps = {
  translations: BankAccountSectionTranslations;
  validate: (value: string) => true | string;
  disabled?: boolean;
  bankFound?: boolean;
  bankAccountNumberValid?: boolean;
};

const ColumnLabel = ({
  children,
  success,
}: {
  children: ReactNode;
  success?: boolean;
}) => (
  <Typography
    variant="globalS"
    sx={{
      fontWeight: 'fontWeightSemiBold',
      color: theme =>
        success
          ? theme.palette.new.text.feedback.success
          : theme.palette.new.text.neutral.default,
    }}
  >
    {children}
  </Typography>
);

const columnSx = { gap: 0.75, width: '100%', minWidth: 0 } as const;

export const BankAccountSection = ({
  translations,
  validate,
  disabled,
  bankFound,
  bankAccountNumberValid,
}: BankAccountSectionProps) => {
  const { bankNameDisabled, bankNameSuccess } = resolveBankAccountSectionState({
    disabled,
    bankAccountNumberValid,
    bankFound,
  });

  return (
    <HuCardContainer
      fullWidth
      padding={0}
      sx={{ minWidth: 0 }}
    >
      <Stack sx={{ p: 2.5, gap: 2 }}>
        <Typography
          variant="globalM"
          sx={{
            fontWeight: 'fontWeightBold',
            color: theme => theme.palette.new.text.neutral.default,
          }}
        >
          {translations.title}
        </Typography>
        <Stack sx={{ gap: 2, width: '100%' }}>
          <Stack sx={columnSx}>
            <ColumnLabel>{translations.label} (*)</ColumnLabel>
            <FormInputClassic
              name="bankAccountNumber"
              rules={{
                required: translations.errorRequired,
                validate,
              }}
              inputProps={{
                placeholder: translations.placeholder,
                helperText: translations.helperText,
                fullWidth: true,
                disabled,
                hasCounter: false,
                maxLength: 18,
                inputMode: 'numeric',
                transform: {
                  input: (value: string) => value.replace(/\D/g, ''),
                },
                sx: {
                  '& .MuiFormHelperText-root .MuiTypography-root': {
                    typography: 'globalXXS',
                  },
                  '& .MuiFormHelperText-root .MuiStack-root': {
                    alignItems: 'center',
                  },
                },
              }}
            />
          </Stack>
          <Stack sx={columnSx}>
            <ColumnLabel success={bankNameSuccess}>
              {translations.bankLabel} (*)
            </ColumnLabel>
            <FormInputClassic
              name="bankName"
              rules={{
                required: translations.bankErrorRequired,
                minLength: {
                  value: 3,
                  message: translations.bankErrorMinLength,
                },
              }}
              inputProps={{
                placeholder: translations.bankPlaceholder,
                fullWidth: true,
                disabled: bankNameDisabled,
                success: bankNameSuccess,
                hasCounter: false,
                sx: {
                  '& .MuiFormHelperText-root .MuiTypography-root': {
                    typography: 'globalXXS',
                  },
                  '& .MuiFormHelperText-root .MuiStack-root': {
                    alignItems: 'center',
                  },
                },
              }}
            />
          </Stack>
        </Stack>
      </Stack>
    </HuCardContainer>
  );
};