import { __read } from "tslib";
import React, { useState, useEffect } from "react";
import { HeaderWrapper, HeaderContainer, ArrowLeft, ArrowRight, MonthBtn, YearBtn, ArrowsContainer } from "../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 = __read(useState(0), 2), baseMonthElementWidth = _b[0], setBaseMonthElementWidth = _b[1];
    var _c = __read(useState(0), 2), monthElementWidth = _c[0], setMonthElementWidth = _c[1];
    useEffect(function () {
        var elementWidth = isYearEditing ? baseMonthElementWidth : 0;
        setMonthElementWidth(elementWidth);
    }, [isYearEditing]);
    return (React.createElement(HeaderWrapper, { isMonthEditing: isMonthEditing },
        !isMonthEditing && (React.createElement(ArrowsContainer, null,
            React.createElement(ArrowLeft, { onClick: onPrevious }))),
        React.createElement(HeaderContainer, { offset: monthElementWidth },
            React.createElement(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.createElement(YearBtn, { offset: monthElementWidth, onClick: function () { return setIsYearEditing(!isYearEditing); } },
                React.createElement("span", null, isYearEditing ? "Год" : currentYear)))),
        !isMonthEditing && (React.createElement(ArrowsContainer, null,
            React.createElement(ArrowRight, { onClick: onNext })))));
};
export default Header;
