"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePicker = void 0;
const react_1 = __importStar(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const AppContext_1 = require("../AppContext");
const dates_1 = require("../../utilities/dates");
const Text_1 = require("../Text");
const Icon_1 = require("../Icon");
const DatePicker_css_1 = __importDefault(require("./DatePicker.css"));
function DatePicker({ month, year, onMonthChange, }) {
    const translate = AppContext_1.useTranslate();
    const geolocation = AppContext_1.useGeolocation();
    const weekStartDay = react_1.useMemo(() => dates_1.getWeekStartDay(geolocation === null || geolocation === void 0 ? void 0 : geolocation.countryCode), [geolocation === null || geolocation === void 0 ? void 0 : geolocation.countryCode]);
    const now = new Date();
    const currentMonth = now.getMonth() === month && now.getFullYear() === year;
    const weekdaysMarkup = dates_1.getOrderedWeekdays(weekStartDay).map((weekday) => {
        return (<WeekdayUI key={weekday} day={dates_1.Weekday[weekday]} current={currentMonth && new Date().getDay() === weekday}/>);
    });
    const weeks = react_1.useMemo(() => dates_1.getWeeksForMonth(month, year, weekStartDay), [
        month,
        year,
        weekStartDay,
    ]);
    const weeksMarkup = weeks.map((week) => {
        const index = week.map((date) => date === null || date === void 0 ? void 0 : date.getDate()).join('');
        return (<tr className={DatePicker_css_1.default.Week} key={index}>
        {week.map((date) => (<Day date={date} key={date === null || date === void 0 ? void 0 : date.getDate()}/>))}
      </tr>);
    });
    const previousYear = dates_1.getPreviousDisplayYear(month, year);
    const previousMonth = dates_1.getPreviousDisplayMonth(month);
    const showPreviousMonthLabel = translate('showPreviousMonth', {
        month: translate(dates_1.Month[previousMonth].toLowerCase()),
        year: `${previousYear}`,
    });
    const nextYear = dates_1.getNextDisplayYear(month, year);
    const nextMonth = dates_1.getNextDisplayMonth(month);
    const showNextMonthLabel = translate('showNextMonth', {
        month: translate(dates_1.Month[nextMonth].toLowerCase()),
        year: `${nextYear}`,
    });
    const handleMonthChange = react_1.useCallback((month, year) => {
        if (!onMonthChange) {
            return;
        }
        onMonthChange(month, year);
    }, [onMonthChange]);
    const monthLabelClassName = css_utilities_1.classNames(DatePicker_css_1.default.MonthLabel, currentMonth && DatePicker_css_1.default['MonthLabel-current']);
    return (<div className={DatePicker_css_1.default.DatePicker}>
      {onMonthChange && (<div className={DatePicker_css_1.default.Controls}>
          <button type="button" onClick={() => handleMonthChange(previousMonth, previousYear)} className={DatePicker_css_1.default.ControlsPrevious} aria-label={showPreviousMonthLabel}>
            <Icon_1.Icon source="arrowLeft" size="base"/>
          </button>
          <button type="button" onClick={() => handleMonthChange(nextMonth, nextYear)} className={DatePicker_css_1.default.ControlsNext} aria-label={showNextMonthLabel}>
            <Icon_1.Icon source="arrowRight" size="base"/>
          </button>
        </div>)}
      
      <table role="grid" className={DatePicker_css_1.default.Month}>
        <caption className={monthLabelClassName} aria-live="polite">
          {translate(dates_1.Month[month].toLowerCase())} {year}
        </caption>
        <thead>
          <tr className={DatePicker_css_1.default.WeekDays}>{weekdaysMarkup}</tr>
        </thead>
        <tbody>{weeksMarkup}</tbody>
      </table>
    </div>);
}
exports.DatePicker = DatePicker;
const WeekdayUI = react_1.memo(function Weekday({ day, current }) {
    const translate = AppContext_1.useTranslate();
    const className = css_utilities_1.classNames(DatePicker_css_1.default.Weekday);
    return (<th scope="col" className={className}>
      <Text_1.Text role={{
        type: 'abbreviation',
        for: translate(day.toLowerCase()),
    }} subdued={!current} emphasized={current} size="small">
        {translate(`${day.toLowerCase()}Abbreviation`)}
      </Text_1.Text>
    </th>);
});
function Day({ date, disabled, selected, inRange }) {
    if (!date) {
        return <td />;
    }
    const label = date.getDate();
    const today = dates_1.isToday(date);
    const className = css_utilities_1.classNames(DatePicker_css_1.default.Day, today && DatePicker_css_1.default['Day-today'], disabled && DatePicker_css_1.default['Day-disabled'], selected && DatePicker_css_1.default['Day-selected'], inRange && DatePicker_css_1.default['Day-inRange']);
    return (<td className={DatePicker_css_1.default.DayCell}>
      {disabled ? (<span className={className}>{label}</span>) : (<button type="button" tabIndex={-1} className={className}>
          {label}
        </button>)}
    </td>);
}