import React, { Component, Fragment } from 'react';
import { inject, observer } from "mobx-react";

@inject("store")
@observer
export class ImportantInfo 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);
        // console.log(toJS(this.cityStore.tourObj.activity));
    }
    render() {
        const tdWidth = '50%';
        // const tour = this.props.tour;
        const tour = (this.cityStore.tourObj.activity);
        return (
            <Fragment>
                <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>
                    {tour.startTimes.length > 0 && tour.startTimes[0].hour !== 0 ?
                    <tr>
                        <td width={tdWidth}>Start times:</td>
                        <td>{`${tour.startTimes[0].hour.toString().padStart(2, '0')}:${tour.startTimes[0].minute.toString().padStart(2, '0')}`}</td>
                    </tr>
                    : null}
                    <tr>
                        <td width={tdWidth}>Tour Code:</td>
                        <td>{tour.externalId}</td>
                    </tr>
                    <tr>
                        <td width={tdWidth}>Booking in advance:</td>
                        <td>{`${tour.bookingCutoffDays} days`}</td>
                    </tr>
                    <tr>
                        <td width={tdWidth}>Live tour guide:</td>
                        <td>English</td>
                        {/* <td>{`${tour.guidanceTypes.lenth!==0&&tour.guidanceTypes[0].languages[0]!=='en' ? 'Other' : 'English'}`}</td> */}
                    </tr>
                    <tr>
                        <td width={tdWidth}>Physical difficulty level:</td>
                        <td>{`${tour.difficultyLevel.replace(/_/g, ' ').toLowerCase()}`}</td>
                    </tr>
                    {/* guidanceTypes */}
                    </tbody>
                </table>
                {tour.description ==='' ? '' :
                <Fragment>
                <h2>description</h2>
                <div dangerouslySetInnerHTML={{__html:tour.description}}/>
                </Fragment>
                }
                {tour.included === '' ? '' :
                <Fragment>
                    <h2>What's included?</h2>
                    <div dangerouslySetInnerHTML={{__html:/^<ul>/.test(tour.included)===false ? '<ul><li>' + tour.included.replace(/,/g, '</li><li>')+ '</ul>' : tour.included}}/>
                </Fragment>
                }
                {tour.excluded === '' ? '' :
                <Fragment>
                <h2>Exclusions</h2>
                    <div dangerouslySetInnerHTML={{__html:/^<ul>/.test(tour.excluded)===false ? '<ul><li>' + tour.excluded.replace(/,/g, '</li><li>')+ '</ul>' : tour.excluded}}/>
                </Fragment>
                }
                {tour.requirements==='' ? '' :
                    <Fragment>
                        <h2>What do I need to bring?</h2>
                        <div dangerouslySetInnerHTML={{__html:tour.requirements}} />
                    </Fragment>
                }
                {tour.attention ==='' ? '' :
                <Fragment>
                <h2>Please note</h2>
                <div dangerouslySetInnerHTML={{__html:tour.attention}}/>
                </Fragment>
                }
                {tour.cancellationPolicy==={} ? '' :
                <Fragment>
                    <h2>Cancellation policy</h2>
                    <ul>
                    {tour.cancellationPolicy.penaltyRules.map(rule => {
                        return (
                            <li key={rule.id}>{`We will charge a cancellation fee of ${rule.charge}% if booking is cancelled ${parseInt(rule.cutoffHours/24, 10)} days or less before event`}</li>
                        )
                    })}</ul>
                </Fragment>
            }
            </Fragment>
        )
    }
}

export default ImportantInfo
