text: import React from 'react';
  import { compose } from 'redux';
  import { withRouter } from 'react-router-dom';
  import { intlShape, injectIntl } from 'react-intl';
  import { arrayOf, bool, func, node, oneOfType, shape, string } from 'prop-types';
  import { FormattedMessage } from 'react-intl';
  import classNames from 'classnames';
  import omit from 'lodash/omit';
  import { propTypes, LISTING_STATE_CLOSED, LINE_ITEM_NIGHT, LINE_ITEM_DAY } from '../../util/types';
  import { formatMoney } from '../../util/currency';
  import { parse, stringify } from '../../util/urlHelpers';
  import config from '../../config';
  import { ModalInMobile, Button } from '../../components';
  import { BookingDatesForm } from '../../forms';
  
  import css from './BookingPanel.css';
  
  // This defines when ModalInMobile shows content as Modal
  const MODAL_BREAKPOINT = 1023;
  
  const priceData = (price, intl) => {
    if (price && price.currency === config.currency) {
      const formattedPrice = formatMoney(intl, price);
      return { formattedPrice, priceTitle: formattedPrice };
    } else if (price) {
      return {
        formattedPrice: `(${price.currency})`,
        priceTitle: `Unsupported currency (${price.currency})`,
      };
    }
    return {};
  };
  
  const openBookModal = (isOwnListing, isClosed, history, location) => {
    if (isOwnListing || isClosed) {
      window.scrollTo(0, 0);
    } else {
      const { pathname, search, state } = location;
      const searchString = `?${stringify({ ...parse(search), book: true })}`;
      history.push(`${pathname}${searchString}`, state);
    }
  };
  
  const closeBookModal = (history, location) => {
    const { pathname, search, state } = location;
    const searchParams = omit(parse(search), 'book');
    const searchString = `?${stringify(searchParams)}`;
    history.push(`${pathname}${searchString}`, state);
  };
  
  const BookingPanel = props => {
    const {
      rootClassName,
      className,
      titleClassName,
      listing,
      currentUser,
      isOwnListing,
      unitType,
      onSubmit,
      title,
      subTitle,
      authorDisplayName,
      onManageDisableScrolling,
      timeSlots,
      fetchTimeSlotsError,
      history,
      location,
      intl,
    } = props;
    const price = listing.attributes.price;
    const hasListingState = !!listing.attributes.state;
    const isClosed = hasListingState && listing.attributes.state === LISTING_STATE_CLOSED;
    const showBookingDatesForm = hasListingState && !isClosed;
    const showClosedListingHelpText = listing.id && isClosed;
    const { formattedPrice, priceTitle } = priceData(price, intl);
    const isBook = !!parse(location.search).book;
    let quantity;
    if (listing.attributes.publicData) {
      quantity = listing.attributes.publicData.quantity;
    }
    const subTitleText = !!subTitle
      ? subTitle
      : showClosedListingHelpText
      ? intl.formatMessage({ id: 'BookingPanel.subTitleClosedListing' })
      : null;
  
    const isNightly = unitType === LINE_ITEM_NIGHT;
    const isDaily = unitType === LINE_ITEM_DAY;
  
    const unitTranslationKey = isNightly
      ? 'BookingPanel.perNight'
      : isDaily
      ? 'BookingPanel.perDay'
      : 'BookingPanel.perUnit';
  
    const classes = classNames(rootClassName || css.root, className);
    const titleClasses = classNames(titleClassName || css.bookingTitle);
    //submit handler function to convert value from select input to selected quantity for the listing
    const handleSubmit = values => {
      // return console.log(values);
      const selectedQuantity = values && values.additionalItems ? values.additionalItems : null;
      onSubmit({
        ...values,
        quantity: selectedQuantity,
        currentUser: currentUser,
      });
    };
  
    return (
      <div className={classes}>
        <ModalInMobile
          containerClassName={css.modalContainer}
          id="BookingDatesFormInModal"
          isModalOpenOnMobile={isBook}
          onClose={() => closeBookModal(history, location)}
          showAsModalMaxWidth={MODAL_BREAKPOINT}
          onManageDisableScrolling={onManageDisableScrolling}
        >
          <div className={css.modalHeading}>
            <h1 className={css.title}>{title}</h1>
            <div className={css.author}>
              <FormattedMessage id="BookingPanel.hostedBy" values={{ name: authorDisplayName }} />
            </div>
          </div>
  
          <div className={css.bookingHeading}>
            <h2 className={titleClasses}>{title}</h2>
            {subTitleText ? <div className={css.bookingHelp}>{subTitleText}</div> : null}
          </div>
          {showBookingDatesForm ? (
            <BookingDatesForm
              className={css.bookingForm}
              submitButtonWrapperClassName={css.bookingDatesSubmitButtonWrapper}
              unitType={unitType}
              // pass handleSubmit instead of onSubmit
              onSubmit={handleSubmit}
              price={price}
              isOwnListing={isOwnListing}
              timeSlots={timeSlots}
              fetchTimeSlotsError={fetchTimeSlotsError}
              quantity={quantity}
              listing={listing}
              currentUser={currentUser}
            />
          ) : null}
        </ModalInMobile>
        <div className={css.openBookingForm}>
          <div className={css.priceContainer}>
            <div className={css.priceValue} title={priceTitle}>
              {formattedPrice}
            </div>
            <div className={css.perUnit}>
              <FormattedMessage id={unitTranslationKey} />
            </div>
          </div>
  
          {showBookingDatesForm ? (
            <Button
              rootClassName={css.bookButton}
              onClick={() => openBookModal(isOwnListing, isClosed, history, location)}
            >
              <FormattedMessage id="BookingPanel.ctaButtonMessage" />
            </Button>
          ) : (
            <div className={css.closedListingButton}>
              <FormattedMessage id="BookingPanel.closedListingButtonText" />
            </div>
          )}
        </div>
      </div>
    );
  };
  
  BookingPanel.defaultProps = {
    rootClassName: null,
    className: null,
    titleClassName: null,
    isOwnListing: false,
    subTitle: null,
    unitType: config.bookingUnitType,
    timeSlots: null,
    fetchTimeSlotsError: null,
  };
  
  BookingPanel.propTypes = {
    rootClassName: string,
    className: string,
    titleClassName: string,
    listing: oneOfType([propTypes.listing, propTypes.ownListing]),
    isOwnListing: bool,
    unitType: propTypes.bookingUnitType,
    onSubmit: func.isRequired,
    title: oneOfType([node, string]).isRequired,
    subTitle: oneOfType([node, string]),
    authorDisplayName: string.isRequired,
    onManageDisableScrolling: func.isRequired,
    timeSlots: arrayOf(propTypes.timeSlot),
    fetchTimeSlotsError: propTypes.error,
  
    // from withRouter
    history: shape({
      push: func.isRequired,
    }).isRequired,
    location: shape({
      search: string,
    }).isRequired,
  
    // from injectIntl
    intl: intlShape.isRequired,
  };
  
  export default compose(
    withRouter,
    injectIntl
  )(BookingPanel);
  