(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "react", "../styles"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    var react_1 = (0, tslib_1.__importStar)(require("react"));
    var styles_1 = require("../styles");
    var Header = function (_a) {
        var currentMonth = _a.currentMonth, currentYear = _a.currentYear, 
        // yearEnd,
        isMonthEditing = _a.isMonthEditing, isYearEditing = _a.isYearEditing, setIsYearEditing = _a.setIsYearEditing, setIsMonthEditing = _a.setIsMonthEditing, onNext = _a.onNext, onPrevious = _a.onPrevious;
        var btnMargin = 8;
        var _b = (0, tslib_1.__read)((0, react_1.useState)(0), 2), baseMonthElementWidth = _b[0], setBaseMonthElementWidth = _b[1];
        var _c = (0, tslib_1.__read)((0, react_1.useState)(0), 2), monthElementWidth = _c[0], setMonthElementWidth = _c[1];
        (0, react_1.useEffect)(function () {
            var elementWidth = isYearEditing ? baseMonthElementWidth : 0;
            setMonthElementWidth(elementWidth);
        }, [isYearEditing]);
        return (react_1.default.createElement(styles_1.HeaderWrapper, { isMonthEditing: isMonthEditing },
            !isMonthEditing && (react_1.default.createElement(styles_1.ArrowsContainer, null,
                react_1.default.createElement(styles_1.ArrowLeft, { onClick: onPrevious }))),
            react_1.default.createElement(styles_1.HeaderContainer, { offset: monthElementWidth },
                react_1.default.createElement(styles_1.MonthBtn, { offset: monthElementWidth, ref: function (node) {
                        return node &&
                            setBaseMonthElementWidth(parseFloat(node.getBoundingClientRect().width.toFixed(2)) +
                                btnMargin);
                    }, onClick: function () { return setIsMonthEditing(!isMonthEditing); } }, isMonthEditing ? "Месяц" : currentMonth),
                !isMonthEditing && (react_1.default.createElement(styles_1.YearBtn, { offset: monthElementWidth, onClick: function () { return setIsYearEditing(!isYearEditing); } },
                    react_1.default.createElement("span", null, isYearEditing ? "Год" : currentYear)))),
            !isMonthEditing && (react_1.default.createElement(styles_1.ArrowsContainer, null,
                react_1.default.createElement(styles_1.ArrowRight, { onClick: onNext })))));
    };
    exports.default = Header;
});
