content: import React from 'react';
  import PropTypes from 'prop-types';
  import ItemDetails from './ItemDetails';
  import FulfilmentDetails from './FulfilmentDetails';
  import ItemDetailTabs from './ItemDetailTabs';
  import OrderStatus from '../containers/OrderStatusContainer';
  import OrderDetails from './OrderDetails';
  import CancelOrderItem from '../containers/CancelOrderContainer';
  import SearchForm from '../containers/OrderFormContainer';
  import LinkPayment from './LinkPayment';
  import Menu from '../containers/Menu.js';
  import styles from '../styles/order.scss';
  import { Strings } from '../model/Strings';
  import {TransitionMotion, Motion, spring} from 'react-motion';
  
  class Order extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              orderById: Strings.orders.orderById[this.props.orderId]
          };
      }
      willLeave() {
          return { o: spring(0) };
      }
      render() {
          return (
              <TransitionMotion
              defaultStyles={[
                  { key: 'one', style: { o: 0 } }
              ]}
              styles={[
                  { key: 'one', style: { o: spring(1) } }
              ]}
              willLeave={this.willLeave}>
              {(intStyles) => (
                  <div>
                      {intStyles.map(({ key, style}) => (
                          <section key={key} style={{ opacity: style.o }} id={styles.order}>
                              <header>
                                  <button id={styles.nav_button}
                                  onClick={() => this.props.onToggleNavBar()}
                                  style={{backgroundImage: 'url(../../assets/images/' + (this.props.isNavBarPlus ? 'close-menu.svg' : 'menu.svg') + ')'}}
                                  >
                                  </button>
                                  <SearchForm />
                                  <div id={styles.sign_out}></div>
                              </header>
                              <div id={styles.order_main}
                              onClick={() => this.props.isNavBarPlus && this.props.onToggleNavBar()} >
                                  {this.props.isNavBarPlus && <Menu noMouseOver />}
                                  <div id={styles.wrapper}>
                                      <div id={styles.info_strip}>
                                          <div id={styles.order_info}>
                                              <div id={styles.order_no}>Order No:<span>{this.props.orderId}</span></div>
                                              <div id={styles.status}>Status:<span>{this.state.orderById.status}</span></div>
                                              <div id={styles.order_date}>Order Date:<span>{this.state.orderById.order_date}</span></div>
                                          </div>
                                          <button id={styles.grid_view}></button>
                                          <button id={styles.list_view}></button>
                                      </div>
                                      <div id={styles.items_wrapper}>
                                              <ItemDetailTabs onToggleOrderTab={this.props.onToggleOrderTab} activeOrderTab={this.props.activeOrderTab} onToggleCancelOrder={this.props.onToggleCancelOrder} isCancelOrderPlus={this.props.isCancelOrderPlus} />
                                              {this.props.activeOrderTab === 'item_details' ? <ItemDetails order={this.state.orderById} isCancelOrderPlus={this.props.isCancelOrderPlus} /> : <FulfilmentDetails order={this.state.orderById} isCancelOrderPlus={this.props.isCancelOrderPlus} />}
                                              <OrderStatus isCancelOrderPlus={this.props.isCancelOrderPlus} orderId={this.props.orderId} />
                                              {this.props.isCancelOrderPlus && <CancelOrderItem onToggleCancelOrder={this.props.onToggleCancelOrder} />}
                                      </div>
                                      <Motion style={{x: spring(this.props.isOrderDetailsPlus ? 28 : 0, {stiffness: 200, damping: 30})}}>
                                      {
                                          ({ x }) =>
                                              <OrderDetails orderId={this.props.orderId} flexEase={x} activeDetailsTab={this.props.activeDetailsTab} onToggleDetails={this.props.onToggleDetails} onToggleDetailsTab={this.props.onToggleDetailsTab} isOrderDetailsPlus={this.props.isOrderDetailsPlus} onClickViewAll={this.props.onClickViewAll} isAllCommentsShown={this.props.isAllCommentsShown} onToggleLinkPayment={this.props.onToggleLinkPayment} />
                                      }
                                      </Motion>
                                  </div>
                              </div>
                              {this.props.isLinkPaymentActive && <LinkPayment onToggleLinkPayment={this.props.onToggleLinkPayment} />}
                          </section>
                      ))}
                  </div>
              )}
              </TransitionMotion>
          );
      }
  }
  
  Order.propTypes = {
      orderId: PropTypes.string,
      onToggleDetails: PropTypes.func,
      onToggleDetailsTab: PropTypes.func,
      onToggleCancelOrder: PropTypes.func,
      onToggleLinkPayment: PropTypes.func,
      isOrderDetailsPlus: PropTypes.bool,
      isCancelOrderPlus: PropTypes.bool,
      activeOrderTab: PropTypes.string,
      activeDetailsTab: PropTypes.string,
      onToggleOrderTab: PropTypes.func,
      onClickViewAll: PropTypes.func,
      isAllCommentsShown: PropTypes.bool,
      onToggleNavBar: PropTypes.func,
      isNavBarPlus: PropTypes.bool,
      isLinkPaymentActive: PropTypes.bool
  };
  
  export default Order;
  