import { IconInfoCircle } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAlert from '@material-hu/components/design-system/Alert';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { type Periodicity } from '../../types';
import { periodicityKey } from '../../utils/periodicity';
import { CurrencyAmount } from '../CurrencyAmount';
import { microloanCardBorderSx } from '../cardSurfaceSx';

import { ConfirmSummaryRow } from './ConfirmSummaryRow';

export type ConfirmStepSummaryColumnProps = {
  summaryPrincipal: number;
  selectedWeeks: number;
  scheduleTotals: { weekly: number; total: number };
  onCreditDetailsOpen?: () => void;
  periodicity: Periodicity;
};

export const ConfirmStepSummaryColumn = ({
  summaryPrincipal,
  selectedWeeks,
  scheduleTotals,
  onCreditDetailsOpen,
  periodicity,
}: ConfirmStepSummaryColumnProps) => {
  const { t } = useLokaliseTranslation('loans');

  return (
    <Stack sx={{ gap: 4, minWidth: 0 }}>
      <Stack
        sx={{
          borderRadius: 3,
          p: 2.5,
          backgroundColor: theme =>
            theme.palette.new.action.button.background.primary.default,
          color: theme => theme.palette.new.action.button.text.primary.default,
          minHeight: '142px',
          ...microloanCardBorderSx,
        }}
      >
        <Typography
          variant="globalXXS"
          sx={{
            color: theme =>
              theme.palette.new.action.button.text.primary.default,
            letterSpacing: 2,
            fontWeight: 'fontWeightSemiBold',
            textTransform: 'uppercase',
          }}
        >
          {t('confirm.summary')}
        </Typography>
        <CurrencyAmount
          value={summaryPrincipal}
          variant="globalXL"
          sx={{
            mt: 0.75,
            fontWeight: 'fontWeightBold',
            color: theme =>
              theme.palette.new.action.button.text.primary.default,
          }}
        />
        <Stack
          sx={{
            flexDirection: 'row',
            flexWrap: 'wrap',
            alignItems: 'baseline',
            columnGap: 0.75,
            rowGap: 0.25,
            mt: 0.5,
            color: theme =>
              theme.palette.new.action.button.text.primary.default,
            opacity: 0.92,
          }}
        >
          <Typography
            component="span"
            variant="globalS"
            sx={{
              color: theme =>
                theme.palette.new.action.button.text.primary.default,
            }}
          >
            {t(periodicityKey('confirm.payment_installments', periodicity), {
              count: selectedWeeks,
            })}
          </Typography>
          <CurrencyAmount
            value={scheduleTotals.weekly}
            variant="globalS"
            sx={{
              color: theme =>
                theme.palette.new.action.button.text.primary.default,
            }}
          />
        </Stack>
      </Stack>

      <HuCardContainer
        fullWidth
        padding={0}
        sx={{ minWidth: 0, overflow: 'hidden' }}
      >
        <Stack sx={{ width: '100%' }}>
          <ConfirmSummaryRow
            label={t('confirm.total_to_pay')}
            value={
              <Stack
                component="span"
                sx={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 0.25,
                }}
              >
                <CurrencyAmount
                  value={scheduleTotals.total}
                  variant="globalM"
                />
                {onCreditDetailsOpen && (
                  <IconButton
                    type="button"
                    size="small"
                    aria-label={t('confirm.credit_details_info_aria')}
                    onClick={event => {
                      event.preventDefault();
                      event.stopPropagation();
                      onCreditDetailsOpen();
                    }}
                    sx={{
                      color: theme => theme.palette.new.text.neutral.brand,
                      p: 0.25,
                    }}
                  >
                    <IconInfoCircle
                      size={18}
                      stroke={2}
                    />
                  </IconButton>
                )}
              </Stack>
            }
            emphasized
          />
        </Stack>
      </HuCardContainer>

      <HuAlert
        severity="info"
        title={t('confirm.payroll_portability_notice')}
      />
    </Stack>
  );
};