import { IconArrowLeft } from '@material-hu/icons/tabler';
import Stack, { type StackProps } from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import * as animations from '@material-hu/utils/animations';

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

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

import { MAX_CONTENT_WIDTH } from '../../constants';

type ButtonProps = Omit<
  React.ComponentProps<typeof Button>,
  'children' | 'onClick'
> & {
  label?: string;
};

type StepLayoutProps = {
  children: React.ReactNode;
  onNext: () => void;
  onBack?: () => void;
  slotProps?: {
    submitButton?: ButtonProps;
    backButton?: ButtonProps;
    root?: StackProps<'div'>;
  };
};

const StepLayout = ({
  children,
  slotProps = {},
  onNext,
  onBack,
}: StepLayoutProps) => {
  const theme = useTheme();
  const { t } = useLokaliseTranslation(['sportsPool', 'general']);
  const {
    submitButton: { label: submitLabel, ...submitProps } = {},
    backButton: { label: backLabel, ...backProps } = {},
  } = slotProps;

  const hasFormFeature = slotProps?.submitButton?.type === 'submit';

  return (
    <Stack
      id={slotProps?.submitButton?.form}
      component={hasFormFeature ? 'form' : 'div'}
      onSubmit={hasFormFeature ? onNext : undefined}
      {...slotProps?.root}
      sx={{
        flex: 1,
        minHeight: 0,
        justifyContent: 'space-between',
        width: '100%',
        backgroundColor: theme.palette.new.background.layout.default,
        animation: `${animations.fadeIn} 150ms ease-in-out backwards`,
        ...slotProps?.root?.sx,
      }}
    >
      {children}

      <Stack
        sx={{
          width: '100%',
          backgroundColor: theme.palette.new.background.layout.tertiary,
        }}
      >
        <Stack
          sx={{
            maxWidth: MAX_CONTENT_WIDTH,
            width: '100%',
            alignSelf: 'center',
            flexDirection: 'row',
            gap: 2,
            justifyContent: 'flex-end',
            p: 4,
            py: 2,
          }}
        >
          {onBack && (
            <Button
              variant="tertiary"
              size="large"
              startIcon={<IconArrowLeft />}
              onClick={onBack}
              sx={{ mr: 'auto' }}
              {...backProps}
            >
              {backLabel ?? t('general:back')}
            </Button>
          )}
          <Button
            variant="primary"
            size="large"
            onClick={hasFormFeature ? undefined : onNext}
            {...submitProps}
          >
            {submitLabel ?? t('general:continue')}
          </Button>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default StepLayout;