import React, { Component, Fragment } from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Link } from 'react-router-dom';
import { WingBlank, WhiteSpace, Tabs, Badge } from 'antd-mobile';
import AppLayout from "@/layouts/AppLayout";
import TourCard from '@/components/TourCard';

@inject("store")
@observer
class CityIndex extends Component {
    constructor(props) {
        super(props);
        this.store = this.props.store;
        this.cityStore = this.store.cityStore;
    }
    componentDidMount() {
        this.cityStore.setCity(this.store.activeCityName);
    }
    handleChangeTab = (tab, index) => {
        this.cityStore.getCategoryItems(tab, index);
    }

    render() {
        // const cityInfo = toJS(this.cityStore.cityInfo);
        const cityCategory = (this.cityStore.cityCategory);
        const cityTourList = toJS(this.cityStore.cityTourList);
        const activetab = this.cityStore.activeTab;

        const RenderContent = () => (
            <WingBlank >
                <WhiteSpace />
                {cityTourList.length !== 0 ? cityTourList.map(tour => {
                    return (
                        <Fragment key={`${this.props.match.params.city}_${tour.activity.id}`}>
                            <Link
                                to={{
                                    pathname: `/tours/${this.props.match.params.city}/${tour.activity.externalId}`,
                                    state: { fromDashboard: true }
                                }}
                            >
                                <TourCard
                                    coverPhoto={tour.activity.keyPhoto ? (tour.activity.keyPhoto.derived.length > 1 ? tour.activity.keyPhoto.derived[1].url : tour.activity.keyPhoto.originalUrl) : ""}
                                    setCarousel={false}
                                    tourName={tour.activity.title}
                                    tourId={tour.activity.externalId}
                                    city={this.props.match.params.city}
                                    defaultMoney={tour.activity.nextDefaultPriceMoney ? (
                                        <Fragment>
                                            <span style={{ fontSize: 16 }} >$&nbsp;</span>
                                            <span>{tour.activity.nextDefaultPriceMoney.amount}</span></Fragment>
                                    ) : "Inquiry"}
                                    defaultCurrency={tour.activity.nextDefaultPriceMoney ? tour.activity.nextDefaultPriceMoney.currency : "USD"}
                                    {...tour.activity}
                                />
                            </Link>
                            <WhiteSpace size="lg" />
                        </Fragment>
                    );
                }) : ''}
            </WingBlank>
        )
        return (
            <AppLayout>
                <WhiteSpace />
                {cityCategory.length > 0 ?
                    <Tabs tabs={cityCategory}
                        renderTabBar={props =>
                            <Tabs.DefaultTabBar {...props} page={2}
                                activeTab={activetab}
                                renderTab={tab => <Badge text={tab.size}>{tab.title}</Badge>} />}
                        onChange={this.handleChangeTab}
                    >
                <RenderContent />
                    </Tabs> : <RenderContent />
    }
            </AppLayout>
        )
    }
}
export default CityIndex;
