import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

import { Button, Card, Modal, ButtonIcon } from '@doodle/components';
import closeIcon from '@doodle/components/visuals/Icon/svg/ic_close.svg';

/**
 * Setting modal component for displaying time warning.
 */
class WarningModal extends PureComponent {
  static propTypes = {
    /**
     * A bool flag for showing the modal component.
     */
    isModalOpen: PropTypes.bool,

    toggleModal: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    onSkip: PropTypes.func.isRequired,
    messages: PropTypes.shape({
      modalTitle: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired,
      content: PropTypes.string.isRequired,
      ariaLabelContinueBtn: PropTypes.string.isRequired,
      continueButton: PropTypes.string.isRequired,
    }).isRequired,
  };

  static defaultProps = {
    isModalOpen: false,
  };

  handleSubmit = () => {
    const { onSubmit, toggleModal } = this.props;

    toggleModal();
    onSubmit();
  };

  handleDiscard = () => {
    const { onSkip, toggleModal } = this.props;

    toggleModal();
    onSkip();
  };

  render() {
    const { isModalOpen, messages } = this.props;

    return (
      <Modal
        className="warning-root-modal"
        show={isModalOpen}
        onExit={this.handleDiscard}
        variant="ink"
        title={messages.modalTitle}
      >
        <Card
          className="warning-modal"
          content={
            <div className="warning-modal-content">
              <div className="warning-modal-header">
                <Button className="warning-modal-close-btn" onClick={this.handleDiscard}>
                  <ButtonIcon icon={closeIcon} className="warning-modal-close-icon" />
                </Button>
                <h2 className="warning-modal-title">{messages.title}</h2>
              </div>
              <p className="warning-modal-description">{messages.content}</p>
              <div className="warning-modal-button-panel">
                <Button aria-label={messages.ariaLabelContinueBtn} variant="blue" onClick={this.handleSubmit}>
                  {messages.continueButton}
                </Button>
              </div>
            </div>
          }
        />
      </Modal>
    );
  }
}

export default WarningModal;