import React from 'react';
import {connect} from 'react-redux';
import moment from 'moment';
import {Link} from 'react-router';
import classnames from 'classnames';
import Page from 'trc-client-core/src/components/Page';
import Auth from 'trc-client-core/src/components/Auth';
import {staticUrl} from 'trc-client-core/src/constants/url';
import {vehiclesRequest} from 'trc-client-core/src/product/ProductActions';

function Tab(props) {
    var {segment, children, activeSegment} = props;
    var className = classnames({
        "TabItem t-uppercase": true,
        "is-active": segment === activeSegment || (!activeSegment && props.default)
    });
    return <li>
        <Link className={className} to="/product/vehicles" query={{segment}}>{children}</Link>
    </li>;
}

var ProductVehicles = React.createClass({
    displayName: 'ProductVehicles',
    render() {
        if (!this.props.vehicles) {
            return null;
        }

        var tabProps = {
            activeSegment: this.props.location.query.segment
        };
        return <Page title="Vehicles">
            <div>
                <ul className="Tabs Tabs-product">
                    <Tab {...tabProps} default segment="All">All</Tab>
                    <Tab {...tabProps} segment="Cars">Cars</Tab>
                    <Tab {...tabProps} segment="Hybrid">Hybrid</Tab>
                    <Auth site="LEXUS">
                        <Tab {...tabProps} segment="performance">Performance</Tab>
                        <Tab {...tabProps} segment="LexusEnform">Lexus Enform</Tab>
                    </Auth>
                        <Tab {...tabProps} segment="SUV_4WD">SUVs & 4WDs</Tab>
                    <Auth site="TOYOTA">
                        <Tab {...tabProps} segment="UTES_VANS">Utes & Vans</Tab>
                        <Tab {...tabProps} segment="ToyotaLink">Toyota Link</Tab>
                    </Auth>
                </ul>
                <ul className="List List-inline">
                    {this.props.vehicles.map(this.renderVehicle).toJS()}
                </ul>
            </div>
        </Page>
    },
    renderVehicle(vehicle) {
        var {modelName, brand, segments, connectedMobility} = vehicle.toJS();
        var launchDate = moment(new Date(vehicle.get('launchDate')));
        var date = launchDate.format("YYYY_MM");
        var {query} = this.props.location;
        var flatName = modelName.toLowerCase().replace(' ', '');
        var isDisabled = segments.indexOf(query.segment) < 0;

        // Extra cases
        switch (query.segment) {
            case 'ToyotaLink':
            case 'LexusEnform':
                isDisabled = connectedMobility;
                break;

            case 'Cars':
                if (segments.indexOf('Hybrid') >= 0) {
                    isDisabled = false;
                }
                break;

            case 'All':
            case undefined:
                isDisabled = false;
                break;
        }

        return <li key={key} className={classnames({'is-disabled': isDisabled})}>
            <Link to={`/product/vehicles/${modelName}`}>
                <img src={staticUrl(`img/ui/product/vehicles/${brand}/${flatName}-${date}.jpg`)} alt="" height="60" width="120"/>
                <div className="t-center">{this.renderNew(launchDate)} {modelName}</div>
            </Link>
        </li>;
    },
    renderNew(launchDate) {
        if(launchDate.add(1, 'month').isAfter(moment())) {
            return <span className="t-red">new</span>;
        }
    }
});



export default ProductVehicles;