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

import { Button, Icon, Link } from '@doodle/components';
import closeIcon from '@doodle/components/visuals/Icon/svg/ic_close.svg';
import checkIcon from '@doodle/components/visuals/Icon/svg/ic_check.svg';

import { PREMIUM_PAGE } from '../../../constants/route';

/* eslint-disable jsx-a11y/tabindex-no-positive */

/**
 * Component that displays upgraded plan after limit.
 */
export default class UpgradeFreePlanAfterLimit extends PureComponent {
  static propTypes = {
    /**
     * A price of business plan.
     */
    businessPrice: PropTypes.number.isRequired,
    /**
     * A callback fired when user subscribes on plan.
     */
    onSubscribe: PropTypes.func.isRequired,
    /**
     * A callback fired when user rejects request.
     */
    onRejectRequest: PropTypes.func.isRequired,
    /**
     * A maximum number of active calendars.
     */
    host: PropTypes.string.isRequired,
    activeCalendarMax: PropTypes.number.isRequired,
    messages: PropTypes.shape({
      noMoreFreeCalendarsTitle: PropTypes.string.isRequired,
      limitFreeUserDescription_start: PropTypes.string.isRequired,
      limitCalendarsDescription_end: PropTypes.string.isRequired,
      businessPlanLink: PropTypes.string.isRequired,
      businessTitle: PropTypes.string.isRequired,
      period: PropTypes.string.isRequired,
      featuresTitle: PropTypes.string.isRequired,
      unlimitedInvitesBenefit: PropTypes.string.isRequired,
      brandingBenefit: PropTypes.string.isRequired,
      otherDoodleBenefit: PropTypes.string.isRequired,
      upgradeButtonTitle: PropTypes.string.isRequired,
    }).isRequired,
  };

  render() {
    const { onRejectRequest, onSubscribe, businessPrice, messages, host } = this.props;

    return (
      <div className="paywall-view">
        <Icon className="paywall-view_close-icon" icon={closeIcon} onClick={onRejectRequest} />
        <h3 className="paywall-view_title upgrade-free_title">{messages.noMoreFreeCalendarsTitle}</h3>
        <p className="paywall-view_info upgrade-free_info">
          <span>{`${messages.limitFreeUserDescription_start} `}</span>
          <span>
            {`${messages.limitCalendarsDescription_end} `}
            <Link to={host + PREMIUM_PAGE} title={messages.businessPlanLink} variant="dark" tabIndex={0}>
              {messages.businessPlanLink}
            </Link>
          </span>
        </p>
        <div className="paywall-view_description upgrade-free_description">
          <h3 className="paywall-view_label upgrade-free_label">
            <span className="paywall-view_plan">{messages.businessTitle}</span>
          </h3>
          <span className="paywall-view_price upgrade-free_price">
            $&nbsp;<span className="paywall-view_price-value">{businessPrice}</span>&nbsp;/
            {messages.period}
          </span>
          <span className="paywall-view_features-title">{messages.featuresTitle}</span>
          <ul className="paywall-view_benefits upgrade-free_benefits">
            <li className="paywall-view_benefit  paywall-view_benefit--highlight">
              <Icon icon={checkIcon} className="Icon paywall-view_benefit-icon" />
              {messages.unlimitedInvitesBenefit}
            </li>
            <li className="paywall-view_benefit  paywall-view_benefit--highlight">
              <Icon icon={checkIcon} className="Icon paywall-view_benefit-icon" />
              {messages.brandingBenefit}
            </li>
            <li className="paywall-view_benefit  paywall-view_benefit--highlight">
              <Icon icon={checkIcon} className="Icon paywall-view_benefit-icon" />
              {messages.otherDoodleBenefit}
            </li>
          </ul>
          <Button variant="blue" onClick={onSubscribe} className="Button paywall-view_link" tabIndex={2}>
            {messages.upgradeButtonTitle}
          </Button>
        </div>
      </div>
    );
  }
}