import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { inject, observer } from "mobx-react";
import { observable, runInAction, toJS } from 'mobx';

import { Drawer, List, NavBar, SearchBar } from 'antd-mobile';
import * as Icons from '@/components/Icons';

@inject("store")
@observer
class AppLayout extends Component {
    @observable draswerOpen = false;
    constructor(props) {
        super(props);
        this.store = this.props.store;
        this.cityStore = this.store.cityStore;
        this.draswerOpen = false;
        // this.cityStore.getCityList();
    }
    componentDidMount() {
    }

    onOpenChange = (...args) => {
        runInAction(() => {
            this.draswerOpen = !this.draswerOpen;
        })
    }
    onSideBarChange = (city) => {
        runInAction(() => {
            this.draswerOpen = !this.draswerOpen;
        })
    }
    handelSearchSubmit = (text) => {
        if (text) {
            this.cityStore.getSearch(text);
        }
        this.onOpenChange();
    };
    render() {
        const CityList = toJS(this.cityStore.CityList);
        const sidebar = (
            <Fragment>
                <SearchBar className='holly-search'
                    placeholder='City | Attraction'
                    cancelText='Reset'
                    // showCancelButton={true}
                    // onChange={this.handelSearchChange}
                    // onCancel={this.onResetSearch}
                    onSubmit={this.handelSearchSubmit}
                />
                <List>
                    <List.Item thumb={Icons.MAP_MARKER}>Popular China Destinations</List.Item>
                </List>
                <div style={{ marginLeft: '50px', marginTop: '10px' }}>
                    {CityList['Popular China Destinations'].map((item, index) => {
                        return (
                            <Link to={`/tours/${(item.title).toLowerCase()}`} key={item.id}
                                className="holly-city-link am-button am-button-ghost am-button-small am-button-inline"
                                onClick={(e) => this.onSideBarChange(item.title)}
                            >
                                {`${item.title}`}
                            </Link>
                        );
                    })}
                </div>
                <List>
                    <List.Item thumb={Icons.MAP_MARKER}>Southest Asia</List.Item>
                </List>
                <div style={{ marginLeft: '50px', marginTop: '10px' }}>
                    {CityList['Southest Asia'].map((item, index) => {
                        return (
                            <Link to={`/tours/${(item.title).toLowerCase()}`} key={item.id}
                                className="holly-city-link am-button am-button-ghost am-button-small am-button-inline"
                                onClick={(e) => this.onSideBarChange(item.title)}
                            >
                                {`${item.title}`}
                            </Link>
                        );
                    })}
                </div>
            </Fragment>
        );
        return (
            <Fragment>
                <NavBar icon={Icons.NAV} onLeftClick={this.onOpenChange}>
                    {this.props.navTitle || this.store.pageTitle}
                </NavBar>
                <Drawer
                    className="holly-drawer"
                    style={{ minHeight: document.documentElement.clientHeight - 45 }}
                    enableDragHandle
                    // contentStyle={{ color: '#00576e' }}
                    sidebar={sidebar}
                    open={this.draswerOpen}
                    touch={true}
                    onOpenChange={this.onOpenChange}
                >
                    {this.props.children}
                </Drawer>
            </Fragment>);
    }
}

export default AppLayout;
