import { useState } from 'react';

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

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

import Countdown from 'src/components/time/Countdown';

import Error from './Error';

export type MaxTriesProps = {
  onRetry?: () => void;
};

const MaxTries = (props: MaxTriesProps) => {
  const { onRetry = () => null } = props;

  const [showRetry, setShowRetry] = useState<boolean>(false);

  const { t } = useLokaliseTranslation('authentication');

  const handleRetry = () => onRetry();

  const handleFinishCount = () => setShowRetry(true);

  return (
    <Error.Container>
      <Error.CardContainer>
        <Error.Title
          title={t('MAX_OTP_TRIES')}
          description={t('MAX_TRIES_REACH.BODY')}
        />
        {!showRetry && (
          <Countdown
            duration={{ minutes: 10 }}
            onFinish={handleFinishCount}
          />
        )}
      </Error.CardContainer>
      <Error.Actions>
        <Button
          onClick={handleRetry}
          variant="primary"
          size="large"
          disabled={!showRetry}
        >
          {t('MAX_TRIES_REACH.BUTTON')}
        </Button>
      </Error.Actions>
    </Error.Container>
  );
};

export default MaxTries;