import { type ReactNode } from 'react';

import { IconX } from '@material-hu/icons/tabler';
import Fade from '@material-hu/mui/Fade';
import IconButton from '@material-hu/mui/IconButton';
import Modal from '@material-hu/mui/Modal';
import Stack from '@material-hu/mui/Stack';
import { alpha } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';

import { formatBankAccountDisplay } from '../../utils/formatters';

export type ConfirmBankAccountModalTranslations = {
  title: string;
  description: string;
  bankAccountNumberLabel: string;
  bankLabel: string;
  bankPlaceholder: string;
  confirm: string;
  back: string;
  close: string;
};

export type ConfirmBankAccountModalProps = {
  open: boolean;
  bankAccountNumber: string;
  bankName: string;
  onConfirm: () => void | Promise<void>;
  onBack: () => void;
  inFlight?: boolean;
  translations: ConfirmBankAccountModalTranslations;
  onExited?: () => void;
};

const Field = ({ label, value }: { label: string; value: ReactNode }) => (
  <Stack sx={{ gap: 0.75 }}>
    <Typography
      variant="globalS"
      sx={{
        fontWeight: 'fontWeightSemiBold',
        color: theme => theme.palette.new.text.neutral.lighter,
      }}
    >
      {label}
    </Typography>
    <Stack
      sx={{
        minHeight: 56,
        justifyContent: 'center',
        borderRadius: 2,
        px: 2,
        py: 1.5,
        backgroundColor: theme => theme.palette.new.background.elements.grey,
      }}
    >
      <Typography
        variant="globalS"
        sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
      >
        {value}
      </Typography>
    </Stack>
  </Stack>
);

export const ConfirmBankAccountModal = ({
  open,
  bankAccountNumber,
  bankName,
  onConfirm,
  onBack,
  inFlight = false,
  translations,
  onExited,
}: ConfirmBankAccountModalProps) => {
  return (
    <Modal
      open={open}
      onClose={inFlight ? undefined : onBack}
      closeAfterTransition
      slotProps={{
        backdrop: {
          sx: theme => ({
            backgroundColor: alpha(theme.palette.common.black, 0.5),
          }),
        },
      }}
    >
      <Fade
        in={open}
        onExited={onExited}
      >
        <Stack
          role="dialog"
          aria-modal="true"
          aria-labelledby="microloans-confirm-bank-account-title"
          sx={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            width: 'calc(100% - 32px)',
            maxWidth: 480,
            outline: 'none',
          }}
        >
          <HuCardContainer
            fullWidth
            padding={0}
            sx={{
              display: 'flex',
              flexDirection: 'column',
              overflow: 'hidden',
              '& > .MuiCardContent-root': {
                p: 0,
                display: 'flex',
                flexDirection: 'column',
              },
            }}
          >
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'flex-start',
                justifyContent: 'space-between',
                gap: 1.5,
                px: 2.5,
                pt: 2.5,
                pb: 2,
              }}
            >
              <Stack sx={{ minWidth: 0, gap: 0.5 }}>
                <Typography
                  id="microloans-confirm-bank-account-title"
                  component="h2"
                  variant="globalM"
                  sx={{
                    fontWeight: 'fontWeightBold',
                    color: theme => theme.palette.new.text.neutral.default,
                  }}
                >
                  {translations.title}
                </Typography>
                <Typography
                  variant="globalXS"
                  sx={{
                    color: theme => theme.palette.new.text.neutral.lighter,
                    lineHeight: 1.45,
                  }}
                >
                  {translations.description}
                </Typography>
              </Stack>
              <IconButton
                aria-label={translations.close}
                disabled={inFlight}
                onClick={onBack}
                sx={{
                  flexShrink: 0,
                  mt: -0.5,
                  mr: -0.5,
                  color: theme => theme.palette.new.text.neutral.default,
                }}
              >
                <IconX size={20} />
              </IconButton>
            </Stack>

            <Stack sx={{ px: 2.5, pb: 2.5, gap: 2 }}>
              <Field
                label={translations.bankAccountNumberLabel}
                value={formatBankAccountDisplay(bankAccountNumber)}
              />
              <Field
                label={translations.bankLabel}
                value={bankName || translations.bankPlaceholder}
              />
            </Stack>

            <Stack
              sx={{
                flexShrink: 0,
                flexDirection: 'row',
                justifyContent: 'flex-end',
                alignItems: 'center',
                gap: 1,
                px: 2.5,
                py: 2,
                borderTop: 1,
                borderColor: theme => theme.palette.new.border.neutral.divider,
              }}
            >
              <Button
                variant="tertiary"
                disabled={inFlight}
                onClick={onBack}
              >
                {translations.back}
              </Button>
              <Button
                variant="primary"
                loading={inFlight}
                disabled={inFlight}
                onClick={() => {
                  void onConfirm();
                }}
                sx={{
                  bgcolor: theme =>
                    theme.palette.new.action.button.background.success.default,
                  color: theme =>
                    theme.palette.new.action.button.text.primary.default,
                  '&:hover': {
                    bgcolor: theme =>
                      theme.palette.new.action.button.background.success.hover,
                  },
                }}
              >
                {translations.confirm}
              </Button>
            </Stack>
          </HuCardContainer>
        </Stack>
      </Fade>
    </Modal>
  );
};