import React, { Component } from 'react';
import { inject, observer } from "mobx-react";
import { WhiteSpace, Button, Flex, List, InputItem } from 'antd-mobile';
import SecondaryLayout from '@/layouts/SecondaryLayout';
import * as Icons from '@/components/Icons';

@inject("store")
@observer
export class BookTravelerDetail extends Component {
    constructor(props){
        super(props);
        this.store = this.props.store;
        this.bookStore = this.store.bookStore;
    }
    onClickAddAdult = () => {
        this.bookStore.addPassenger(1);
    }
    onClickAddChild = () => {
        this.bookStore.addPassenger(2);
    }
    onDeletePassenger = (passenger, index) => {
        this.bookStore.deletePassenger(index);
    }
    fillPassengerName = (index, value) => {
        this.bookStore.fillPassengerName(index, value);
    }
    fillPassengerId = (index, value) => {
        this.bookStore.fillPassengerId(index, value);
    }
    onTravelerOK = () => {
        this.store.pushHistory('/book');
    }

    render() {
        const { passengerList} = this.bookStore;
        return (
            <SecondaryLayout navTitle="Travelers">
                {passengerList.map((passenger, index) => {
                    return (
                        <List key={index} renderHeader={() => `Passenger ${(index+1)}. ${passenger.ageType===1 ? 'Adult' : 'Child'}`}>
                        <InputItem
                            clear
                            placeholder="|"
                            onChange={(value) => {this.fillPassengerName(index, value)}}
                            defaultValue={passenger.fullname}
                        >Full name</InputItem>
                        <InputItem
                            clear
                            placeholder="|"
                            onChange={(value) => this.fillPassengerId(index, value)}
                            defaultValue={passenger.idNumber}
                        >Passport No.</InputItem>
                        {index===0 ? null :
                        <Flex>
                        <Flex.Item><Button icon={Icons.DELETE} onClick={(e) => {this.onDeletePassenger(passenger, index)}}>Remove passenger</Button></Flex.Item>
                        </Flex>}
                    </List>
                    )
                })}
                <WhiteSpace />
                <Flex>
                    <Flex.Item>
                        <Button icon={Icons.USER} onClick={this.onClickAddAdult}>Add Adult</Button>
                    </Flex.Item>
                    <Flex.Item>
                        <Button icon={Icons.CHILD} onClick={this.onClickAddChild}>Add Child</Button>
                    </Flex.Item>
                </Flex>
                <Button type="primary" onClick={this.onTravelerOK}
                    style={{zIndex:999, borderRadius:0, width: '100%', position:'fixed', bottom:0}}>OK</Button>
            </SecondaryLayout>
        )
    }
}
export default BookTravelerDetail
