import pick from 'lodash/pick';
import camelCase from 'lodash/camelCase';
import React, { Component, PropTypes } from 'react';
import Modal from 'react-bootstrap/lib/Modal';

import CompactReservationList from 'shared/compact-reservation-list';
import RecurringReservationControls from 'shared/recurring-reservation-controls';
import { injectT } from 'i18n';
import { isStaffEvent } from 'utils/reservationUtils';
import { getTermsAndConditions } from 'utils/resourceUtils';
import ReservationForm from './ReservationForm';

class ConfirmReservationModal extends Component {
  constructor(props) {
    super(props);
    this.getFormFields = this.getFormFields.bind(this);
    this.getFormInitialValues = this.getFormInitialValues.bind(this);
    this.onConfirm = this.onConfirm.bind(this);
    this.renderIntroTexts = this.renderIntroTexts.bind(this);
  }

  onConfirm(values) {
    const { onClose, onConfirm } = this.props;
    onClose();
    onConfirm(values);
  }

  getFormFields(termsAndConditions) {
    const {
      isAdmin,
      isStaff,
      resource,
    } = this.props;
    const formFields = [...resource.supportedReservationExtraFields].map(value => camelCase(value));

    if (isAdmin) {
      formFields.push('comments');
    }

    if (resource.needManualConfirmation && isStaff) {
      formFields.push('staffEvent');
    }

    if (termsAndConditions) {
      formFields.push('termsAndConditions');
    }

    return formFields;
  }

  getFormInitialValues() {
    const {
      isEditing,
      reservationsToEdit,
      resource,
      selectedReservations,
    } = this.props;
    let reservation;

    if (isEditing) {
      reservation = reservationsToEdit.length ? reservationsToEdit[0] : null;
    } else {
      reservation = selectedReservations.length ? selectedReservations[0] : null;
    }

    let rv = reservation ? pick(reservation, this.getFormFields()) : {};
    if (isEditing) {
      rv = { ...rv, staffEvent: isStaffEvent(reservation, resource) };
    }
    return rv;
  }

  getModalTitle(isEditing, isPreliminaryReservation, t) {
    if (isEditing) {
      return t('ConfirmReservationModal.editTitle');
    }
    if (isPreliminaryReservation) {
      return t('ConfirmReservationModal.preliminaryReservationTitle');
    }
    return t('ConfirmReservationModal.regularReservationTitle');
  }

  getRequiredFormFields(resource, termsAndConditions) {
    const requiredFormFields = [...resource.requiredReservationExtraFields.map(
      field => camelCase(field)
    )];

    if (termsAndConditions) {
      requiredFormFields.push('termsAndConditions');
    }

    return requiredFormFields;
  }

  renderIntroTexts() {
    const {
      isAdmin,
      isEditing,
      isPreliminaryReservation,
      recurringReservations,
      reservationsToEdit,
      selectedReservations,
      t,
    } = this.props;

    if (isEditing) {
      return (
        <div>
          <p>
            <strong>{t('ConfirmReservationModal.confirmationText')}</strong>
          </p>
          <p>
            {t('ConfirmReservationModal.beforeText')}
          </p>
          <CompactReservationList reservations={reservationsToEdit} />
          <p>
            {t('ConfirmReservationModal.afterText')}
          </p>
          <CompactReservationList reservations={selectedReservations} />
        </div>
      );
    }

    const reservationsCount = selectedReservations.length;
    const helpText = isPreliminaryReservation ?
      t('ConfirmReservationModal.preliminaryReservationText', { reservationsCount }) :
      t('ConfirmReservationModal.regularReservationText', { reservationsCount });

    return (
      <div>
        {isAdmin && <RecurringReservationControls />}
        <p><strong>{helpText}</strong></p>
        <CompactReservationList
          reservations={[...selectedReservations, ...recurringReservations]}
        />
        {isPreliminaryReservation && (
          <div>
            <p>{t('ConfirmReservationModal.priceInfo')}</p>
            <p>{t('ConfirmReservationModal.formInfo')}</p>
          </div>
        )}
      </div>
    );
  }

  render() {
    const {
      isAdmin,
      isEditing,
      isMakingReservations,
      isPreliminaryReservation,
      onClose,
      resource,
      show,
      staffEventSelected,
      t,
    } = this.props;

    const termsAndConditions = isAdmin ? '' : getTermsAndConditions(resource);

    return (
      <Modal
        animation={false}
        backdrop="static"
        className="confirm-reservation-modal"
        onHide={onClose}
        show={show}
      >
        <Modal.Header closeButton>
          <Modal.Title>
            {this.getModalTitle(isEditing, isPreliminaryReservation, t)}
          </Modal.Title>
        </Modal.Header>

        <Modal.Body>
          {this.renderIntroTexts()}
          <ReservationForm
            fields={this.getFormFields(termsAndConditions)}
            initialValues={this.getFormInitialValues()}
            isMakingReservations={isMakingReservations}
            onClose={onClose}
            onConfirm={this.onConfirm}
            requiredFields={this.getRequiredFormFields(resource, termsAndConditions)}
            staffEventSelected={staffEventSelected}
            termsAndConditions={termsAndConditions}
          />
        </Modal.Body>
      </Modal>
    );
  }
}

ConfirmReservationModal.propTypes = {
  isAdmin: PropTypes.bool.isRequired,
  isEditing: PropTypes.bool.isRequired,
  isMakingReservations: PropTypes.bool.isRequired,
  isPreliminaryReservation: PropTypes.bool.isRequired,
  isStaff: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  onConfirm: PropTypes.func.isRequired,
  recurringReservations: PropTypes.array.isRequired,
  reservationsToEdit: PropTypes.array.isRequired,
  resource: PropTypes.object.isRequired,
  selectedReservations: PropTypes.array.isRequired,
  show: PropTypes.bool.isRequired,
  staffEventSelected: PropTypes.bool,
  t: PropTypes.func.isRequired,
};

export default injectT(ConfirmReservationModal);

@@ -3351,17 +3351,20 @@
   const 
-r
+allR
 eservati
@@ -3370,24 +3370,97 @@
 ions
-Count = selected
+ = %5B...selectedReservations, ...recurringReservations%5D;%0A    const reservationsCount = all
 Rese
@@ -3876,46 +3876,11 @@
 ns=%7B
-%5B...selectedReservations, ...recurring
+all
 Rese
@@ -3887,17 +3887,16 @@
 rvations
-%5D
 %7D%0A      

Use correct plural in reservation confirm modal