import React, { useEffect, useRef } from 'react';
import classnames from 'classnames';
import { WEEKS, getMonthDaysArray, isSameDate, isToday } from './utils';
var PickerDay = function (props) {
    var date = props.date, onChange = props.onChange, panelDate = props.panelDate, panelOnChange = props.panelOnChange, prefixCls = props.prefixCls;
    var tbodyEl = useRef(null);
    var panelDays = getMonthDaysArray(panelDate);
    var _tbodyOnClick = function (e) {
        var target = e.target;
        if (target.nodeName === 'DIV') {
            var dateIdx = parseInt(target.dataset.date, 10);
            onChange(panelDays[dateIdx].date);
            !panelDays[dateIdx].isThisMonth && panelOnChange(panelDays[dateIdx].date);
        }
    };
    useEffect(function () {
        tbodyEl.current && tbodyEl.current.addEventListener('click', _tbodyOnClick);
        return function () {
            tbodyEl.current && tbodyEl.current.removeEventListener('click', _tbodyOnClick);
        };
    });
    var _renderDays = function () {
        var _a;
        var trs = [];
        var idx = 0;
        for (var i = 0; i < panelDays.length / 7; i++) {
            var tds = [];
            for (var j = 0; j < 7; j++, idx++) {
                var cls = classnames(prefixCls + "__day-cell", (_a = {},
                    _a[prefixCls + "__day-cell_active"] = panelDays[idx].isThisMonth,
                    _a[prefixCls + "__day-cell_today"] = isToday(panelDays[idx].date),
                    _a[prefixCls + "__day-cell_selected"] = isSameDate(date, panelDays[idx].date),
                    _a));
                tds.push((React.createElement("td", { key: idx + "_" + panelDays[idx].label, className: prefixCls + "__data-item" },
                    React.createElement("div", { className: cls, "data-date": idx }, panelDays[idx].label))));
            }
            trs.push(React.createElement("tr", { key: "" + idx + i }, tds));
        }
        return trs;
    };
    return (React.createElement("div", { className: prefixCls },
        React.createElement("table", { className: prefixCls + "__table" },
            React.createElement("thead", null,
                React.createElement("tr", { className: prefixCls + "__head" }, WEEKS.map(function (week) { return (React.createElement("th", { key: week, className: prefixCls + "__head-item" },
                    React.createElement("div", { className: prefixCls + "__week-cell" }, week))); }))),
            React.createElement("tbody", { ref: tbodyEl }, _renderDays()))));
};
PickerDay.defaultProps = {
    prefixCls: 'ty-date-picker-day',
};
export default PickerDay;
//# sourceMappingURL=picker-day.js.map