import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import DatePicker from 'material-ui/DatePicker';
import TimePicker from 'material-ui/TimePicker';
import * as moment from 'moment';
import * as React from 'react';
import {utils} from 'ts/utils/utils';

interface ExpirationInputProps {
    orderExpiryTimestamp: BigNumber;
    updateOrderExpiry: (unixTimestampSec: BigNumber) => void;
}

interface ExpirationInputState {
    dateMoment: moment.Moment;
    timeMoment: moment.Moment;
}

export class ExpirationInput extends React.Component<ExpirationInputProps, ExpirationInputState> {
    private _earliestPickableMoment: moment.Moment;
    constructor(props: ExpirationInputProps) {
        super(props);
        // Set the earliest pickable date to today at 00:00, so users can only pick the current or later dates
        this._earliestPickableMoment = moment().startOf('day');
        const expirationMoment = utils.convertToMomentFromUnixTimestamp(props.orderExpiryTimestamp);
        const initialOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
        const didUserSetExpiry = !initialOrderExpiryTimestamp.eq(props.orderExpiryTimestamp);
        this.state = {
            dateMoment: didUserSetExpiry ? expirationMoment : undefined,
            timeMoment: didUserSetExpiry ? expirationMoment : undefined,
        };
    }
    public render() {
        const date = this.state.dateMoment ? this.state.dateMoment.toDate() : undefined;
        const time = this.state.timeMoment ? this.state.timeMoment.toDate() : undefined;
        return (
            <div className="clearfix">
                <div className="col col-6 overflow-hidden pr3 flex relative">
                    <DatePicker
                        className="overflow-hidden"
                        hintText="Date"
                        mode="landscape"
                        autoOk={true}
                        value={date}
                        onChange={this._onDateChanged.bind(this)}
                        shouldDisableDate={this._shouldDisableDate.bind(this)}
                    />
                    <div
                        className="absolute"
                        style={{fontSize: 20, right: 40, top: 13, pointerEvents: 'none'}}
                    >
                        <i className="zmdi zmdi-calendar" />
                    </div>
                </div>
                <div className="col col-5 overflow-hidden flex relative">
                    <TimePicker
                        className="overflow-hidden"
                        hintText="Time"
                        autoOk={true}
                        value={time}
                        onChange={this._onTimeChanged.bind(this)}
                    />
                    <div
                        className="absolute"
                        style={{fontSize: 20, right: 9, top: 13, pointerEvents: 'none'}}
                    >
                        <i className="zmdi zmdi-time" />
                    </div>
                </div>
                <div
                    onClick={this._clearDates.bind(this)}
                    className="col col-1 pt2"
                    style={{textAlign: 'right'}}
                >
                    <i style={{fontSize: 16, cursor: 'pointer'}} className="zmdi zmdi-close" />
                </div>
            </div>
        );
    }
    private _shouldDisableDate(date: Date): boolean {
        return moment(date).startOf('day').isBefore(this._earliestPickableMoment);
    }
    private _clearDates() {
        this.setState({
            dateMoment: undefined,
            timeMoment: undefined,
        });
        const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec();
        this.props.updateOrderExpiry(defaultDateTime);
    }
    private _onDateChanged(e: any, date: Date) {
        const dateMoment = moment(date);
        this.setState({
            dateMoment,
        });
        const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment);
        this.props.updateOrderExpiry(timestamp);
    }
    private _onTimeChanged(e: any, time: Date) {
        const timeMoment = moment(time);
        this.setState({
            timeMoment,
        });
        const dateMoment =  _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment;
        const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, timeMoment);
        this.props.updateOrderExpiry(timestamp);
    }
}