import React from 'react';
import PropTypes from 'prop-types';
import {Col, Row, styled, styledFlexBoxGridSetting} from '@fcl/theme';
import PlatformThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Card from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton';
import AltFareLogo from 'components/AltFareLogo';
import Price from 'components/Price';
import CategoryIndicator from 'components/CategoryIndicator';
import AirlineLogo from 'components/AirlineLogo';
import Selection from 'components/Selection';
import Destination from 'components/FlightDestination';
import AirExpoints from 'components/AirExpoints';
import TravelDates from 'components/TravelDates';
import LimitedAvailability from 'components/LimitedAvailability';
import defaultThemeSettings from 'services/defaultThemeSettings';
import isEscapeFaresSelection from 'services/isEscapeFaresSelection';
import altFareWasPriceLabel from 'services/altFareWasPriceLabel';

import {bookingModalLink} from './services/bookingModalLink';

export class Tile extends React.Component {
  static propTypes = {
    className: PropTypes.string,
    product: PropTypes.object,
    mobile: PropTypes.number,
    tablet: PropTypes.number,
    desktop: PropTypes.number
  }

  static defaultProps = {
    className: '',
    product: {},
    mobile: 1,
    tablet: 2,
    desktop: 3
  }

  constructor (props) {
    super(props);
    this.state = {shadow: 1};
    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);
  }

  onMouseOver () {
    this.setState({shadow: 3});
  }

  onMouseOut () {
    this.setState({shadow: 1});
  }

  render () {
    const {
      className,
      mobile,
      tablet,
      desktop,
      product
    } = this.props;
    const {
      destination,
      country,
      category,
      air_ex_points: airExPoints,
      price,
      price_secondary: priceSecondary,
      airline_code: airlineCode,
      airlineName: airlineName,
      selection,
      travel_dates: travelDates,
      bookable
    } = product;

    const {gridSize, gutterWidth} = styledFlexBoxGridSetting.flexboxgrid;
    const wasPriceLabel = isEscapeFaresSelection(selection) ? altFareWasPriceLabel() : 'Was';
    const isBookable = Boolean(parseInt(bookable));

    return (
      <PlatformThemeProvider muiTheme={defaultThemeSettings}>
        <Col
          xs={gridSize / mobile}
          sm={gridSize / tablet}
          md={gridSize / desktop}
          className={className}
        >
          <Card
            onMouseOver={this.onMouseOver}
            onMouseOut={this.onMouseOut}
            zDepth={this.state.shadow}
            style={{
              height: '100%',
              overflow: 'hidden',
              padding: '12px 8px'
            }}
          >
            <Row>
              <Col xs={12}>
                <Row>
                  <Col xs={7}>
                    <CategoryIndicator category={category}/>
                    <AirExpoints>{`${airExPoints} to`}</AirExpoints>
                    <Destination destination={destination} country={country}/>
                    <AirlineLogo
                      iataCode={airlineCode}
                      airlineName={airlineName}
                      logoType="logo_210x80"
                      showName
                    />
                  </Col>
                  <Col xs={5} style={{float: 'right'}}>
                    <Row>
                      <Col>
                        <AltFareLogo product={product}/>
                      </Col>
                    </Row>
                    <Row>
                      <Col>
                        <Selection selection={selection}/>
                      </Col>
                    </Row>
                    <Row>
                      <Col>
                        <Price
                          label="Flight from"
                          value={price}
                          wasLabel={wasPriceLabel}
                          was={priceSecondary}
                          pt
                        />
                        <LimitedAvailability product={product}/>
                      </Col>
                    </Row>
                  </Col>
                </Row>
              </Col>
            </Row>
            <Row>
              <Col xs={12}>
                <TravelDates>{`Travel Dates ${travelDates}`}</TravelDates>
              </Col>
            </Row>
            <Row>
              <Col xs={isBookable ? 6 : 12}>
                <RaisedButton
                  label="Enquire Now"
                  fullWidth
                  backgroundColor={defaultThemeSettings.palette.accent3Color}
                  labelColor="#fff"
                  href="#enquire"
                />
              </Col>
              {isBookable &&
                <Col xs={6}>
                  <RaisedButton
                    fullWidth
                    label="Book Now"
                    containerElement={
                      <a
                        className="product-action booking-modal use-ajax"
                        data-open="soar-form-modal"
                        href={bookingModalLink(product)}
                      />
                    }
                  />
                </Col>
              }
            </Row>
          </Card>
        </Col>
      </PlatformThemeProvider>
    );
  }
}

export default styled(Tile)`
  padding-bottom: 2rem;
  font-family: Roboto, sans-serif;
  position: relative;

  ${Destination} {
    margin: 0 0 32px;
  }

  ${AltFareLogo} {
    display: block;
    margin: 0 0 8px;
  }

  ${Selection} {
    margin: 0 0 5px;
  }
`;