import React from 'react';
import * as Text from '../../../shared/components/text/text';
import { Modal } from 'app/shared/components/modal/modal';
import { authSendChangePwdEmail } from 'app/common/store/auth/auth.actions';
import { useDispatch } from 'react-redux';

interface ResetPasswordModalProps {
  isOpened: boolean;
  onOverlay: () => void;
}

export const ResetPasswordModal = ({ isOpened, onOverlay }: ResetPasswordModalProps) => {
  const dispatch = useDispatch();
  return (
    <Modal
      extraClass='c-reset-password-modal'
      contentExtraClass='u-align--left'
      isOpened={isOpened}
      onOverlay={onOverlay}
      centered
    >
      <>
        <div className='u-margin-bottom--tiny'>
          <Text.Label extraClass='u-margin--none'>
            RESET PASSWORD
          </Text.Label>
        </div>
        <Text.Paragraph size="small" extraClass='u-margin--none'>
          If you need to change your password, please
          <Text.Link extraClass="u-font-size--normal u-cursor--pointer">
            <span
              className='js-change-password-hit-area'
              onClick={() => dispatch(authSendChangePwdEmail())}>
              {' '}click here
            </span>
          </Text.Link>
        </Text.Paragraph>
        <Text.Paragraph
          size="small"
          extraClass='u-margin--none'>
          and we’ll send you an email with a link to reset it.
        </Text.Paragraph>
      </>
    </Modal>
  );
};

export default ResetPasswordModal;