import React, { Component, Fragment } from 'react';
import { inject, observer } from "mobx-react";
import { toJS } from 'mobx';
import { List, Button } from 'antd-mobile';
import SecondaryLayout from '@/layouts/SecondaryLayout';
import TourCard from '@/components/TourCard';

const Item = List.Item;

@inject("store")
@observer
export class TourIndex extends Component {
    constructor(props) {
        super(props);
        this.store = this.props.store;
        this.cityStore = this.store.cityStore;
        this.cityStore.getTour(this.props.match.params.city,this.props.match.params.tourId);
    }
    componentDidMount() {
        this.store.setDocumentTitle(toJS(this.cityStore.tourObj).activity.title);
    }
    onClickTourDetail = (detailCat) => {
        this.store.pushHistory(this.props.location.pathname+'/'+detailCat.toLowerCase());
    }
    onClickBook = () => {
        this.store.pushHistory('/book');
    }

    render() {
        const tour = toJS(this.cityStore.tourObj).activity;
        const tdWidth = '30%';
        return (
            <SecondaryLayout navTitle={this.store.pageTitle}>
                <TourCard
                    style={{boxShadow:'none'}}
                    setCarousel={tour.photos.length > 0 ? true : false}
                    coverPhoto={tour.keyPhoto ? (tour.keyPhoto.derived.length >1 ? tour.keyPhoto.derived[1].url : tour.keyPhoto.originalUrl) : ""}
                    tourName={tour.title}
                    // tourId={tour.externalId}
                    // city={this.props.match.params.city}
                    defaultMoney={tour.nextDefaultPriceMoney ? (
                        <Fragment>
                            <span style={{ fontSize: 16 }} >$&nbsp;</span>
                            <span>{tour.nextDefaultPriceMoney.amount}</span></Fragment>
                    ) : "Inquiry"}
                    defaultCurrency={tour.nextDefaultPriceMoney ? tour.nextDefaultPriceMoney.currency : "USD"}
                    {...tour}
                />
                {/* <WingBlank className='holly-block-border__bottom'> */}
                <List >
                    <Item ><h3>Overview</h3>
                    </Item>
                    <Item align="top" multipleLine={true} >
                    <p>{tour.excerpt}</p>
                    </Item>
                    </List>
                <List >
                <Item arrow="horizontal" onClick={(e) => {this.onClickTourDetail('important')}}><h3>Important Info</h3></Item>
                    <Item align="top" multipleLine={true} >
                    <table>
                        <tbody style={{lineHeight:"30px", verticalAlign: 'top', textAlign: 'left',}}>
                        <tr>
                            <td width={tdWidth}>Location:</td>
                            <td>{tour.googlePlace ? `${tour.googlePlace.country}, ${tour.googlePlace.city}` : ''}</td>
                        </tr>
                        <tr>
                            <td width={tdWidth}>Duration:</td>
                            <td>{tour.durationText}</td>
                        </tr>
                        <tr>
                            <td width={tdWidth}>Tour Code:</td>
                            <td>{tour.externalId}</td>
                        </tr>
                        </tbody>
                    </table>
                    </Item>
                    </List>
                <List >
                    <Item arrow="horizontal" onClick={(e) => {this.onClickTourDetail('Schedule')}}>
                    <h3>Schedule</h3>
                    </Item>
                    {/* <Item align="top" multipleLine>
                    <p>{tour.googlePlace.country}</p>
                    </Item> */}
                    </List>
                <List >
                    <Item arrow="horizontal" onClick={(e) => {this.onClickTourDetail('Pricing')}}>
                    <h3>Pricing</h3>
                    </Item>
                    {/* <p>{tour.googlePlace.country}</p> */}
                    </List>
                {/* </WingBlank> */}
                {/* <WhiteSpace size='xl' />
                <WhiteSpace size='xl' />
                <WhiteSpace /> */}
                <Button type="primary" onClick={this.onClickBook} style={{ zIndex: 20, borderRadius: 0, width: 'auto', position: 'sticky', bottom: 0 }}>Book Now</Button>
            </SecondaryLayout>
        )
    }
}

export default TourIndex
