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, SearchBar } from 'antd-mobile';
import AppLayout from "@/layouts/AppLayout";
import TourCard from '@/components/TourCard';
const Loading = (
    <div className="lds-ripple">
        <div></div>
        <div></div>
    </div>
)
@inject("store")
@observer
class Search extends Component {
    constructor(props) {
        super(props);
        this.store = this.props.store;
        this.cityStore = this.store.cityStore;
    }
    componentDidMount() {
        this.cityStore.setCity(this.store.activeCityName);
    }
    handelSearchSubmit = (text) => {
        this.cityStore.resetSearch();
        if (text) {
            this.cityStore.getSearch(text);
        }
    }
    onResetSearch = () => {
        this.cityStore.resetSearch();
    }

    render() {
        const searchResult = toJS(this.cityStore.searchResult);
        const searchKeyword = (this.cityStore.searchKeyword);
        const searching = (this.cityStore.searching);
        return (
            <AppLayout navTitle='Search City | Attraction ...'>
                <SearchBar className='holly-search'
                    placeholder='City | Attraction'
                    cancelText='Reset'
                    defaultValue={searchKeyword}
                    // onCancel={this.onResetSearch}
                    onSubmit={this.handelSearchSubmit}
                />
                <WingBlank >
                    {searching===true ? Loading :
                    searchResult.length !== 0 ? searchResult.map(tour => {
                        return (
                            <Fragment key={tour.id}>
                                <Link
                                    to={{
                                        pathname: `/tours/${tour.list_name}/${tour.externalId}`,
                                        state: { fromDashboard: true }
                                    }}
                                >
                                    <TourCard
                                        coverPhoto={tour.keyPhoto ? (tour.keyPhoto.derived.length > 1 ? tour.keyPhoto.derived[1].url : tour.keyPhoto.originalUrl) : ""}
                                        setCarousel={false}
                                        tourName={tour.title}
                                        tourId={tour.externalId}
                                        city={tour.list_name}
                                        defaultMoney={tour.price ? (
                                            <Fragment>
                                                <span style={{ fontSize: 16 }} >$&nbsp;</span>
                                                <span>{tour.price}</span></Fragment>
                                        ) : "Inquiry"}
                                        defaultCurrency={tour.nextDefaultPriceMoney ? tour.nextDefaultPriceMoney.currency : "USD"}
                                        {...tour}
                                    />
                                </Link>
                                <WhiteSpace size="lg" />
                            </Fragment>
                        );
                    }) : <p>No Data</p> }
                </WingBlank>
            </AppLayout>
        )
    }
}
export default Search;
