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

@inject("store")
@observer
export class ScheduleInfo 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 tour = (this.cityStore.tourObj.activity);
        return (
            <Fragment>
                <WhiteSpace />
                {tour.agendaItems.length===0 ?
                <div dangerouslySetInnerHTML={{__html:tour.description}}/>
                :
                <Fragment>
                    <h2>Itinerary</h2>
                    {tour.agendaItems.map(agenda => {
                        return (
                            <Fragment key={agenda.id}>
                            <h3 key={`title-${agenda.id}`}>{agenda.title}</h3>
                            <div dangerouslySetInnerHTML={{__html:agenda.body}} />
                            </Fragment>
                        )
                    })}
                </Fragment>
                }
                {tour.noPickupMsg===''||tour.startPoints===[] ? '' :
                <Fragment>
                    <h2>Meeting points</h2>
                    <div dangerouslySetInnerHTML={{__html:tour.noPickupMsg}} />
                {tour.startPoints===[] ? '' :
                <Fragment>
                    {tour.startPoints.map(point => {
                        return (
                            <Fragment key={point.id}>
                                <h4>{point.title}</h4>
                                <p>{`${point.address.addressLine1},${point.address.city} ${point.address.postalCode},${point.address.state},${point.address.countryCode}`}</p>
                            </Fragment>
                        )
                    })}
                </Fragment>
                }
                </Fragment>
                }
            </Fragment>
        )
    }
}

export default ScheduleInfo
