import React, { Component, Fragment } from 'react';
import { observer, inject } from 'mobx-react';
import { WhiteSpace, Flex, Carousel } from 'antd-mobile';

@inject("store")
@observer
export class TourCard extends Component {
    state = {
        imgHeight: 176,
    }
    componentDidMount() {
    }
    render() {
        return (
            <div className="holly-card" style={{ fontSize: 16 }}>
                {this.props.setCarousel !== false ?
                    <Carousel
                        autoplay={false}
                        infinite

                    >
                        {this.props.photos.slice(0, 3).map(val => (
                            <Fragment key={val.id}>
                                <img
                                    src={val.originalUrl}
                                    alt={val.description}
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </Fragment>
                        ))}
                    </Carousel>
                    :
                    <img
                        key={this.props.id}
                        src={this.props.coverPhoto}
                        // alt={this.props.tourName}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top', borderRadius: '5px 5px 0 0' }}
                        onLoad={() => {
                            // fire window resize event to change height
                            window.dispatchEvent(new Event('resize'));
                            this.setState({ imgHeight: 'auto' });
                        }}
                    />
                }

                <div className="holly-content-padding holly-img-foot" >
                    <Flex>
                        <p >{this.props.tourName}</p>
                        <div>
                            <WhiteSpace />
                            {this.props.defaultMoney === 'Inquiry' ? '' :
                                <div style={{ textAlign: 'right', color: '#666', fontSize: 14 }}>
                                    <span>from&nbsp;</span>{this.props.defaultCurrency}</div>
                            }
                            <div style={{ fontWeight: 700, fontSize: 'x-large', color: '#c53806' }}>
                                {this.props.defaultMoney}</div>
                        </div>
                    </Flex>
                </div>
            </div>
        )
    }
}

export default TourCard;
