import React, { Component } from 'react';
import { inject, observer } from "mobx-react";
import { List, WhiteSpace, SearchBar } from 'antd-mobile';
import SecondaryLayout from '@/layouts/SecondaryLayout';

@inject("store")
@observer
export class BookSelectCountry extends Component {
    constructor(props) {
        super(props);
        this.store = this.props.store;
        this.countryStore = this.store.countryStore;
        this.bookStore = this.store.bookStore;
    }
    handelSearchChange = (text) => {
        if (text) {
            this.countryStore.searchCountry(text);
        }
    };

    onResetSearch = () => {
        this.countryStore.resetSearch();
    }

    handleCountryClick(country) {
        this.bookStore.selectCountry(country);
        this.store.goBack();
    }
    render() {
        return (
            <SecondaryLayout navTitle="Select Country">
                <SearchBar
                    placeholder='Search'
                    cancelText='Reset'
                    showCancelButton={true}
                    onChange={this.handelSearchChange}
                    onCancel={this.onResetSearch} />
                <WhiteSpace size='lg' />
                <List>
                    {this.countryStore.countryList.map((country, index) => (
                        <List.Item
                            key={index}
                            arrow='horizontal'
                            onClick={() => this.handleCountryClick(country)}
                        >
                            {country.label + ' (+' + country.code + ')'}
                        </List.Item>
                    ))}
                </List>
                {/* <Button type="primary" onClick={this.onOKCountry}
                    style={{zIndex:999, borderRadius:0, width: '100%', position:'fixed', bottom:0}}>OK</Button> */}
            </SecondaryLayout>
        )
    }
}
export default BookSelectCountry
