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

import { store } from '../../state/store';
import initialize from '../../state/initialize';
import { noop } from '../../constants/common';

import PaywallModal from '../PaywallModal';
import WarningModal from '../WarningModal';

export default class Wrapper extends PureComponent {
  static propTypes = {
    onReject: PropTypes.func,
    onSubscribe: PropTypes.func,
    onModalOpen: PropTypes.func,
    variant: PropTypes.shape({
      title: PropTypes.string,
      subscribeUrlParameters: PropTypes.arrayOf(
        PropTypes.shape({
          name: PropTypes.string.isRequired,
          value: PropTypes.string.isRequired,
        })
      ),
      buttonText: PropTypes.string,
      bodyText: PropTypes.string,
    }),
    messages: PropTypes.shape({
      title: PropTypes.string.isRequired,
      skipTitle: PropTypes.string.isRequired,
      startTrialTitle: PropTypes.string.isRequired,
      subscribeTitle: PropTypes.string.isRequired,
      trialTitle: PropTypes.string.isRequired,
      trialSubtitle: PropTypes.string.isRequired,
      productDescription: PropTypes.string.isRequired,
      trialDescription: PropTypes.string.isRequired,
      moreTitle: PropTypes.string.isRequired,
      upgradeToBusinessTitle: PropTypes.string.isRequired,
      upgradeToBusinessDescription_start: PropTypes.string.isRequired,
      upgradeToBusinessDescription_end: PropTypes.string.isRequired,
      businessPlanLink: PropTypes.string.isRequired,
      limitCalendarsTitleStart: PropTypes.string.isRequired,
      limitCalendarsTitleEnd: PropTypes.string.isRequired,
      limitCalendarsDescription_start: PropTypes.string.isRequired,
      limitCalendarsDescription_end: PropTypes.string.isRequired,
      upgradeButtonTitle: PropTypes.string.isRequired,
      limitFreeUserDescription_start: PropTypes.string.isRequired,
      getUnlim: PropTypes.string.isRequired,
      trialViewTitle: PropTypes.string.isRequired,
      trialViewSubtitle: PropTypes.string.isRequired,
      trialViewLabel: PropTypes.string.isRequired,
      trialPeriod: PropTypes.string.isRequired,
      startTrialButtonLabel: PropTypes.string.isRequired,
      syncBenefit: PropTypes.string.isRequired,
      subscribeButtonTitle: PropTypes.string.isRequired,
      allBenefitsPrefix: PropTypes.string.isRequired,
      allBenefitsLink: PropTypes.string.isRequired,
      allBenefitsPostfix: PropTypes.string.isRequired,
      businessTitle: PropTypes.string.isRequired,
      period: PropTypes.string.isRequired,
      featuresTitle: PropTypes.string.isRequired,
      upgradeTitle: PropTypes.string.isRequired,
      currentBenefit: PropTypes.string.isRequired,
      unlimitedInvitesBenefit: PropTypes.string.isRequired,
      brandingBenefit: PropTypes.string.isRequired,
      otherDoodleBenefit: PropTypes.string.isRequired,
      noBookingBenefit: PropTypes.string.isRequired,
      noCardBenefit: PropTypes.string.isRequired,
      warningModalTitle: PropTypes.string.isRequired,
      warningTitle: PropTypes.string.isRequired,
      warningContent: PropTypes.string.isRequired,
      warningAriaLabelContinueBtn: PropTypes.string.isRequired,
      warningContinueButton: PropTypes.string.isRequired,
      premiumBCTitle: PropTypes.string.isRequired,
      premiumBCSubscribeTitle: PropTypes.string.isRequired,
      premiumDoodleFeatures: PropTypes.string.isRequired,
      unlimitedBenefit: PropTypes.string.isRequired,
      allPCBenefitsPrefix: PropTypes.string.isRequired,
      allPCBenefitsLink: PropTypes.string.isRequired,
      allPCBenefitsPostfix: PropTypes.string.isRequired,
      premiumPeriod: PropTypes.string.isRequired,
      unlimBCBenefit: PropTypes.string.isRequired,
    }).isRequired,
    host: PropTypes.string.isRequired,
    defaultOptions: PropTypes.object,
  };

  static defaultProps = {
    onModalOpen: noop,
    onSubscribe: noop,
    onReject: noop,
    defaultOptions: {},
    variant: { title: undefined, subscribeUrlParameters: [], buttonText: undefined, bodyText: undefined },
  };

  constructor(props) {
    super(props);

    initialize(props.defaultOptions);
  }

  render() {
    const { onSubscribe, onReject, onModalOpen, messages, host, variant } = this.props;

    return (
      <Provider store={store}>
        <PaywallModal
          onSubscribe={onSubscribe}
          onReject={onReject}
          onModalOpen={onModalOpen}
          messages={messages}
          variant={variant}
          host={host}
        />
        <WarningModal
          messages={{
            modalTitle: messages.warningModalTitle,
            title: messages.warningTitle,
            content: messages.warningContent,
            ariaLabelContinueBtn: messages.warningAriaLabelContinueBtn,
            continueButton: messages.warningContinueButton,
          }}
        />
      </Provider>
    );
  }
}