import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { withTranslation } from 'react-i18next';
import Proptypes from 'prop-types';
import { DatePicker } from "@progress/kendo-react-dateinputs";
//import { CustomWeekCell } from '../ExtendedClasses';
import moment from 'moment-timezone';

class MyDatePicker extends Component {
    static propTypes = {
        //required
        t: Proptypes.func.isRequired,
        name: Proptypes.string.isRequired,
        callback: Proptypes.func.isRequired,
        style: Proptypes.objectOf(Proptypes.string),
        //optional
        defaultValue: Proptypes.oneOfType([Proptypes.string, Proptypes.number]),
        disabled: Proptypes.bool,
        readOnly: Proptypes.bool,
        required: Proptypes.bool,
        width: Proptypes.number,
        tabIndex: Proptypes.number,
        //Extended by Telerik Component
        labelWidth: Proptypes.oneOfType([Proptypes.string, Proptypes.number]),
        labelHeight: Proptypes.oneOfType([Proptypes.string, Proptypes.number]),
        floatingLabel: Proptypes.string,
        fixedLabel: Proptypes.string,
        labelPosition: Proptypes.string,
        formatPlaceholder: Proptypes.objectOf(Proptypes.string),
        weekNumber: Proptypes.bool,
        format: Proptypes.string,
        value: Proptypes.string,
    }

    static defaultProps = {
        _datepicker: null,
        style: {},
        defaultValue: '',
        disabled: false,
        readOnly: false,
        required: false,
        width: 100,
        tabIndex: -1,
        //Extended by Telerik Component
        labelWidth: "auto",
        labelHeight: "auto",
        floatingLabel: '',
        fixedLabel: '',
        labelPosition: 'left',
        formatPlaceholder: { year: "    ", month: "  ", day: "  " },
        weekNumber: false,
        format: "dd/MM/yyyy",
        value: "",
    }

    /**
     * @constructor
     * @param {Object} props - props of the component
     * @description instantiate component and his state
     */
    constructor(props) {
        super(props);
        this.state = {
            value: props.defaultValue,
        };
    }

    /**
     * 
     */
    componentDidMount() {
        console.log("componentDidMount")
        const {
            value,
            defaultValue,
            format,
        } = this.props;

        console.log(this.props)
        this.setState({
            defaultValue: null,
        });
        this.setState({
            defaultValue: defaultValue,//no effect !!!
            value: value,//no effect !!!
        });
        console.log("value from props");
        console.log(value);

        console.log("value from state");
        console.log(this.state.value);

        console.log("defaultValue from props");
        console.log(defaultValue);

        console.log("defaultValue from state");
        console.log(this.sdefaultValue);

        var root = ReactDOM.findDOMNode(this._root);
        var input = root.querySelector('input');

        console.log("input from DOM");
        console.log(input);

        console.log("input value from DOM");
        console.log(input.value);

        if (input && defaultValue) {
            console.log("force setting manually")
            var s1 = moment(defaultValue, format).format("X");
            input.value = value;//no effect !!!
            input.ariaValuetext = "01/01/2021";//no effect !!!
            input.ariaValuenow = s1 + "000";//no effect !!!
            console.log("check after forcing")
            console.log(input) //no effect !!!
        }
    }

    /**
     * @param {Object} prevProps - the previous props of component
     * @description setDefaultValue if props changed
     */
    componentDidUpdate(prevProps) {
        console.log("componentDidUpdate")
        const {
            value,
            defaultValue,
        } = this.props;

        if (prevProps !== this.props) {
            this.setState({
                defaultValue: defaultValue,
                value: value,
            });
        }
    }

    /**
     * valudeChanged
     * @method
     * @param {Object} e - the event fired
     * @description fired when a value changed - check validators -
     * set the state of component - call callback to notify changed
     */
    onChange = (e) => {
        const {
            //callback,
            //name,
            readOnly,
        } = this.props;
        const value = e.value;
        if (readOnly) {
            return;
        }
        this.setState({
            value,
        });
        //callback({ name: name, value: value }, this, null);
    }

    /**
     * render
     * @description templates the component
     */
    render() {
        const {
            defaultValue,
            value,
        } = this.state;
        const {
            name,
            width,
            disabled,
            style,
            tabIndex,
            readOnly,
            //Extended by Telerik Component
            floatingLabel,
            fixedLabel,
            labelWidth,
            labelHeight,
            labelPosition,
            formatPlaceholder,
            weekNumber,
            format,
        } = this.props;
        const showFixedLabel = fixedLabel && labelPosition && !floatingLabel && (labelWidth || labelHeight);
        let display = "";
        let templateColumns = "";
        let templateRows = "";
        let w = labelWidth ? labelWidth : "auto";
        let h = labelHeight ? labelHeight : "auto";
        if (showFixedLabel) {
            display = "grid";
            switch (labelPosition) {
                case "top": templateRows = h + "px auto"; break;
                case "right": templateColumns = "auto" + w + "px"; break;
                case "bottom": templateRows = "auto" + h + "px"; break;
                case "left": templateColumns = w + "px auto"; break;
                default:
                    return;
            }
        }
        return (
            <div className="k-MyDatePicker-Container k-Theme-Palette-Primary"
                ref={(c) => this._root = c}
                style={{ ...style, display: `${display}`, width: `${w + 2}px`, height: `${h + 2}px`, gridTemplateColumns: `${templateColumns}`, gridTemplateRows: `${templateRows}` }}>
                {showFixedLabel &&
                    (<div className="k-MyDatePicker-Label" style={{ ...style, width: `${w}px`, height: `${h}px` }}>
                        {fixedLabel}
                    </div>)}
                <DatePicker style={{ ...style, width: `${width}px` }}
                    ref={(c) => this._datepicker = c}
                    defaultValue={defaultValue instanceof Date ? defaultValue : null}
                    className="k-MyDatePicker-DatePicker k-Theme-Palette-Secondary"
                    width={width}
                    formatPlaceholder={formatPlaceholder}
                    tabIndex={tabIndex}
                    label={floatingLabel}
                    name={name}
                    weekNumber={weekNumber}
                    disabled={disabled}
                    readonly={readOnly}
                    //weekCell={CustomWeekCell}
                    format={format}
                    onChange={this.onChange} />
            </div>
        )
    }
}

export { MyDatePicker };
const o = withTranslation()(MyDatePicker);
o.displayName = 'MyDatePicker';
export default o;