import React, { Component, Fragment } from 'react';
import { observer, inject } from 'mobx-react';
import { Card, WhiteSpace, WingBlank, Button } from 'antd-mobile';

@inject("store")
@observer
export class ItineraryCard extends Component {
    constructor(props) {
        super(props);
        this.store = this.props.store;
    }
    goDetail = (coli, orderId) => {
        this.store.pushHistory(`/order/${coli}/${orderId}`);
    }
    render() {
        return (
            <Fragment>
                <WingBlank size="lg">
                    <Card className="holly-card">
                        <Card.Header title={this.props.groupCode === 'null' ? `BR# ${this.props.groupCode}` : `BR# ${this.props.orderId}`} />
                        <Card.Body>
                            <div>{this.props.tourName}</div>
                            <WhiteSpace size="lg" />
                            <div>{`Travel Date ${this.props.startDate}`}</div>
                            <WhiteSpace />
                        </Card.Body>
                        <Card.Footer
                            content={<Button type="ghost" size="small" inline onClick={e => this.goDetail(this.props.coli, this.props.orderId)} className="am-button-borderfix">Order Details</Button>}
                            style={{ color: '#AF151B' }}
                            extra={
                                <div style={{ lineHeight: '33px' }}>
                                    <span style={{ display: 'inline-block', verticalAlign: 'top' }}>{this.props.ispaid}</span></div>
                            }
                        />
                        <WhiteSpace />
                    </Card>
                    <WhiteSpace size="lg" />
                </WingBlank>
            </Fragment>
        )
    }
}

export default ItineraryCard;
