import React, { Component } from 'react';
import { inject, observer } from "mobx-react";
import { WingBlank, Button, WhiteSpace } from 'antd-mobile';
import SecondaryLayout from '@/layouts/SecondaryLayout';
import ImportantInfo from '@/views/ImportantInfo';
import PricingInfo from '@/views/PricingInfo';
import ScheduleInfo from '@/views/ScheduleInfo';

const navTitleObj = {
    important: "Important Info",
    pricing: "Pricing",
    schedule: "Schedule",
}

@inject("store")
@observer
export class InfoDetail 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);
    }
    onClickBook = () => {
        this.store.pushHistory('/book');
    }
    switchRender = (cat) => {
        switch (cat) {
            case 'important':
                return (
                    <ImportantInfo />
                );

            case 'pricing':
                return (
                    <PricingInfo />
                );

            case 'schedule':
                return (
                    <ScheduleInfo />
                );

            default:
                return (
                    <ImportantInfo />
                );
        }
    }
    render() {
        return (
            <SecondaryLayout navTitle={navTitleObj[this.props.match.params.detailcat.toLowerCase()]}>
                <WingBlank style={{ color: '#666' }}>
                    {this.switchRender(this.props.match.params.detailcat)}
                </WingBlank>
                <WhiteSpace size='xl' />
                <WhiteSpace size='xl' />
                <WhiteSpace />
                <Button type="primary" onClick={this.onClickBook} style={{ zIndex: 20, borderRadius: 0, width: '100%', position: 'fixed', bottom: 0 }}>Book Now</Button>
            </SecondaryLayout>
        )
    }
}

export default InfoDetail;
