import { useTranslation } from 'react-i18next';

import { LoadingButton } from '@mui/lab';
import {
  Button,
  Divider,
  Stack,
  Typography,
  useMediaQuery,
  useTheme,
} from '@mui/material';

import FormInputClassic from '../../../design-system/Inputs/Classic/form';
import FormInputPassword from '../../../design-system/Inputs/Password/form';
import Link from '../../../design-system/Link';

import { type LoginFormProps } from './types';

const LoginForm = ({
  title,
  formConfig,
  hasInstanceSelected,
  callbacks,
  sso,
  termsOfUseAndPrivacy,
  isSubmitting,
  submitDisabled = false,
  showAnotherInstanceButton,
}: LoginFormProps) => {
  const { t } = useTranslation('material_hu_only');
  const theme = useTheme();
  const isSmUp = useMediaQuery(theme.breakpoints.up('sm'));

  const commonButtonProps = {
    fullWidth: true,
    disabled: isSubmitting,
    size: isSmUp ? 'large' : 'medium',
  } as const;
  const { onSubmit, onRecoverPassword, onSelectAnother } = callbacks;

  return (
    <>
      <Stack
        sx={{
          width: '100%',
          gap: 5,
        }}
      >
        {title}
        <form
          noValidate
          onSubmit={onSubmit}
        >
          <Stack sx={{ gap: 4 }}>
            <FormInputClassic
              name="email"
              inputProps={{
                label: t('login.user'),
                autoFocus: true,
                type: 'email',
                disabled: hasInstanceSelected,
                hasCounter: false,
                autoComplete: 'email',
              }}
              rules={formConfig.email.rules}
            />
            {hasInstanceSelected && (
              <Stack sx={{ gap: 1 }}>
                <FormInputPassword
                  name="password"
                  inputProps={{
                    label: t('login.password'),
                    autoFocus: true,
                    autoComplete: 'current-password',
                  }}
                  rules={formConfig.password.rules}
                />
                <Link
                  onClick={onRecoverPassword}
                  aria-label={t('login.forgot_password')}
                  sx={{
                    width: 'fit-content',
                  }}
                >
                  {t('login.forgot_password')}
                </Link>
              </Stack>
            )}
            <Stack sx={{ gap: 2 }}>
              <LoadingButton
                {...commonButtonProps}
                disabled={isSubmitting || submitDisabled}
                type="submit"
                variant="primary"
                size="large"
                loading={isSubmitting}
              >
                {hasInstanceSelected ? t('login.login') : t('login.continue')}
              </LoadingButton>
              {showAnotherInstanceButton && (
                <Button
                  {...commonButtonProps}
                  variant="secondary"
                  onClick={onSelectAnother}
                >
                  {t('login.select_another_community')}
                </Button>
              )}
            </Stack>
            {!hasInstanceSelected && (
              <Stack sx={{ gap: 3 }}>
                <Divider
                  sx={{
                    width: '100%',
                    height: '25px',
                    backgroundColor: 'transparent',
                  }}
                >
                  <Typography
                    variant="globalM"
                    sx={{
                      color: theme.palette.new.text.neutral.lighter,
                    }}
                  >
                    {t('login.or_login_with')}
                  </Typography>
                </Divider>
                <Stack
                  sx={{
                    flexDirection: 'row',
                    width: '100%',
                    justifyContent: 'space-evenly',
                  }}
                >
                  {sso.azureButton}
                  {sso.googleButton}
                  {sso.oktaButton}
                </Stack>
              </Stack>
            )}
          </Stack>
        </form>
      </Stack>
      {termsOfUseAndPrivacy || <Stack />}
    </>
  );
};

export default LoginForm;