import * as React from 'react';
import { DatePicker, IDatePickerStrings } from 'office-ui-fabric-react';
import { CachingService } from '../../Services';
import { DateUtils } from '../../Utils';
import TimePicker from 'rc-time-picker';
import 'rc-time-picker/assets/index.css';
import './index.css';

let moment = require("moment");

export class DateTimePicker extends React.Component<any, any> {

    private datepickerStrings: IDatePickerStrings;
    private _cachingService: CachingService = new CachingService();
    private _dateUtils: DateUtils = new DateUtils();

    constructor(props: any) {
        super(props);

        let defaultValue = null;
        let defaultTime = moment()
        defaultTime.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });

        if (this.props.defaultValue) {
            defaultValue = this.ConvertToDateTime(this.props.defaultValue)
            defaultTime = moment()
            defaultTime.set({ hour: defaultValue.getHours(), minute: defaultValue.getMinutes(), second: defaultValue.getSeconds(), millisecond: 0 });
        }

        this.state = {
            date: defaultValue,
            time: defaultTime,
            value: defaultValue
        }

        if (this._cachingService.readPersistant("Language") != 1) {
            this.datepickerStrings = {
                days: [
                    "Sunday",
                    "Monday",
                    "Tuesday",
                    "Wednsday",
                    "Thursday",
                    "Friday",
                    "Saturday"
                ],
                goToToday: "Go to today",
                months: [
                    "January",
                    "February",
                    "March",
                    "April",
                    "May",
                    "June",
                    "July",
                    "August",
                    "September",
                    "October",
                    "November",
                    "December"
                ],
                shortDays: ["S", "M", "T", "W", "T", "F", "S"],
                shortMonths: [
                    "Jan",
                    "Feb",
                    "Mar",
                    "Apr",
                    "May",
                    "June",
                    "July",
                    "Aug",
                    "Sept",
                    "Oct",
                    "Nov",
                    "Dec"
                ]
            };
        } else {
            this.datepickerStrings = {
                days: [
                    "الاحد",
                    "الاثنين",
                    "الثلاثاء",
                    "الاربعاء",
                    "الخميس",
                    "الجمعة",
                    "السبت"
                ],
                goToToday: "اذهب الي اليوم",
                months: [
                    "يناير",
                    "فبراير",
                    "مارس",
                    "ابريل",
                    "مايو",
                    "يونيو",
                    "يوليو",
                    "اغسطس",
                    "سبتمبر",
                    "اكتوبر",
                    "نوفمبر",
                    "ديسمبر"
                ],
                shortDays: ["ح", "ن", "ث", "ع", "خ", "ج", "س"],
                shortMonths: [
                    "يناير",
                    "فبراير",
                    "مارس",
                    "ابريل",
                    "مايو",
                    "يونيو",
                    "يوليو",
                    "اغسطس",
                    "سبتمبر",
                    "اكتوبر",
                    "نوفمبر",
                    "ديسمبر"
                ]
            };
        }
    }

    private ConvertToDateTime(dateTime: string): Date {
        if (!dateTime)
            return new Date();

        if (typeof (dateTime) == "string" && dateTime.indexOf('T') > -1) {
            dateTime = dateTime.split('T')[0] + ' ' + dateTime.split('T')[1] + ' GMT+00:00'
        }

        return new Date(dateTime)
    }

    private _onFormatDate = (date: any): string => {
        // return date.getDate() + '/' + (date.getMonth() + 1) + '/' + (date.getFullYear() % 100);
        return this._dateUtils.formatDate(date);
    };

    private onDateChange(value: any) {
        this.setState({ date: value });
        this.setValue(value, null);
    }

    private onTimeChange(value: any) {
        this.setState({ time: value });
        this.setValue(null, value);
    }

    private setValue(date: any, time: any) {

        if (!date)
            date = this.state.date;
        if (!time)
            time = this.state.time;

        let value = null;
        if (date && time) {
            value = new Date(date.getTime());
            value.setHours(time.hour())
            value.setMinutes(time.minutes())
            value.setSeconds(time.seconds())
        }

        this.setState({ value: value });

        this.props.onChange(value);
    }

    public render(): JSX.Element {
        return (
            <div>
                <div style={{ paddingLeft: "0px" }} className="ms-Grid-col ms-sm6 ms-md6 ms-lg6">
                    <DatePicker
                        value={this.state.date}
                        label={this.props.displayName}
                        placeholder=""
                        minDate={new Date()}
                        strings={this.datepickerStrings}
                        allowTextInput={true}
                        isRequired={!this.props.allowNull}
                        onSelectDate={this.onDateChange.bind(
                            this
                        )}
                        formatDate={this._onFormatDate.bind(this)}
                    />
                </div>
                <div style={{ paddingRight: "0px", paddingTop: "39px" }} className="ms-Grid-col ms-sm6 ms-md6 ms-lg6">
                    <TimePicker
                        showSecond={false}
                        defaultValue={this.state.time}
                        allowEmpty={false}
                        onChange={this.onTimeChange.bind(this)}
                        format={'h:mm a'}
                        use12Hours
                        inputReadOnly
                    />
                </div>
            </div>
        );
    }
}