"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* @flow */
const react_1 = __importStar(require("react"));
const react_infinite_calendar_1 = __importDefault(require("react-infinite-calendar"));
require("react-infinite-calendar/styles.css");
const classnames_1 = __importDefault(require("classnames"));
const moment_1 = __importDefault(require("moment"));
const react_portal_1 = require("react-portal");
const react_transition_group_1 = require("react-transition-group");
const ErrorBoundary_1 = __importDefault(require("components/hoc/ErrorBoundary"));
const withStyles_1 = __importDefault(require("components/hoc/withStyles"));
const TextField_1 = __importDefault(require("components/bosons/TextField"));
const FieldLabel_1 = __importDefault(require("components/bosons/FieldLabel"));
const prop_types_1 = __importDefault(require("prop-types"));
{
    DatePickerProps;
}
from;
'./types';
const styles_1 = __importDefault(require("./styles"));
class DatePicker extends react_1.Component {
    constructor() {
        super(...arguments);
        this.state = {
            isModalOpen: false,
            selectedDate: '',
            internalDate: new Date(),
            lastValue: null,
        };
        this.closeModal = () => {
            const { selectedDate } = this.state;
            if (selectedDate) {
                // if date is already selected then on close, set internalDate date to selected date
                // so that even if user selected another date , we will reset it on Cancel Button/ Close Modal
                this.setState({ internalDate: selectedDate });
            }
            else {
                this.setState({ internalDate: null });
            }
            this.setState({ isModalOpen: false });
        };
        this._selectDateAndClose = () => {
            const { internalDate } = this.state;
            if (internalDate) {
                this.setState({ selectedDate: internalDate });
            }
            this.setState({ isModalOpen: false });
            if (this.props.onDateChange) {
                const date = internalDate ? moment_1.default(internalDate).format() : null;
                this.props.onDateChange(date);
            }
        };
        this._onReset = () => {
            this.setState({
                internalDate: null,
                selectedDate: null,
                isModalOpen: false,
            });
            this.props.onDateChange(null);
        };
    }
    componentDidMount() {
        if (this.props.value) {
            this.setState({
                selectedDate: moment_1.default(this.props.value).format(),
            });
        }
    }
    componentDidUpdate(prevProps) {
        if (this.props.value !== prevProps.value) {
            this.setState({
                selectedDate: this.props.value
                    ? moment_1.default(this.props.value).format()
                    : null,
            });
        }
    }
    _renderTextInput() {
        const { classes, placeholder, dateFormat, textFieldProps } = this.props;
        const { selectedDate } = this.state;
        return (react_1.default.createElement("div", { className: classes.inputWrapper, onClick: () => {
                this.setState({ isModalOpen: true });
            } },
            react_1.default.createElement(TextField_1.default, Object.assign({}, textFieldProps, { placeholder: placeholder || 'Select Date', value: selectedDate ? moment_1.default(selectedDate).format(dateFormat) : '', showClearIcon: false, disabled: true, classes: {
                    textInputWrapper: classes.textInputWrapper,
                    textInput: classes.textInput,
                } })),
            react_1.default.createElement("div", { className: classes.calendarButton },
                react_1.default.createElement("i", { className: 'fa fa-calendar' }))));
    }
    _renderCalendarModal() {
        const { classes, calendarProps } = this.props;
        const { isModalOpen, selectedDate, internalDate } = this.state;
        return (react_1.default.createElement(react_transition_group_1.Transition, { in: isModalOpen, timeout: 0 }, state => {
            if (!isModalOpen) {
                return null;
            }
            return (react_1.default.createElement(react_portal_1.Portal, null,
                react_1.default.createElement("div", { className: classnames_1.default(classes.modalWrapper, state) },
                    react_1.default.createElement("div", { className: classnames_1.default(classes.calendarWrapper, state) },
                        react_1.default.createElement(react_infinite_calendar_1.default, Object.assign({ width: 400, height: 350, selected: selectedDate || internalDate, displayOptions: {
                                showOverlay: false,
                            }, onSelect: e => {
                                this.setState({ internalDate: e });
                            } }, calendarProps)),
                        Boolean(internalDate) && (react_1.default.createElement("div", { className: classes.buttons },
                            react_1.default.createElement("div", { className: classes.button, onClick: this._onReset }, "Reset"),
                            react_1.default.createElement("div", { className: classes.rightButtons },
                                react_1.default.createElement("div", { className: classes.button, onClick: this.closeModal }, "Cancel"),
                                react_1.default.createElement("div", { className: classes.button, onClick: this._selectDateAndClose }, "Ok"))))),
                    react_1.default.createElement("div", { className: classnames_1.default(classes.overlayWrapper, state), onClick: this._selectDateAndClose }))));
        }));
    }
    render() {
        const { classes } = this.props;
        return (react_1.default.createElement(ErrorBoundary_1.default, null,
            react_1.default.createElement("div", { className: classes.component },
                this.props.label && react_1.default.createElement(FieldLabel_1.default, { label: this.props.label }),
                this._renderTextInput(),
                this._renderCalendarModal())));
    }
}
DatePicker.propTypes = {
    isDisabled: prop_types_1.default.bool,
    label: prop_types_1.default.string,
    placeholder: prop_types_1.default.string,
    onDateChange: prop_types_1.default.func,
    dateFormat: prop_types_1.default.string,
    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.instanceOf(Date)]),
    textFieldProps: prop_types_1.default.object,
    calendarProps: prop_types_1.default.object,
    classes: prop_types_1.default.object,
};
DatePicker.defaultProps = {
    onDateChange: () => { },
    dateFormat: 'YYYY-MM-DD',
    isDisabled: false,
    textFieldProps: {},
    calendarProps: {},
};
exports.default = withStyles_1.default(styles_1.default)(DatePicker);
//# sourceMappingURL=index.js.map