import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { Calendar, Callout, defaultCalendarStrings, DirectionalHint, FocusTrapZone } from '@fluentui/react';
import { useBoolean } from '@fluentui/react-hooks';
import { memo, useCallback, useRef, useState } from 'react';
import { CalendarButton, CalendarContainer, CalendarLabel, Container, iconClass } from './CalendarPicker.styles.js';
export const CalendarPicker = /*#__PURE__*/ memo(function CalendarPicker({ onSelectDate , disabled , cleanLabel  }) {
    const [selectedDate, setSelectedDate] = useState();
    const [showCalendar, { toggle: toggleShowCalendar , setFalse: hideCalendar  }, ] = useBoolean(false);
    const buttonContainerRef = useRef(null);
    const onSelectDateChange = useCallback((date)=>{
        setSelectedDate(date);
        hideCalendar();
    }, [
        hideCalendar
    ]);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsxs(CalendarContainer, {
                ref: buttonContainerRef,
                children: [
                    /*#__PURE__*/ _jsx(CalendarButton, {
                        "aria-label": "Compass",
                        iconName: "Calendar",
                        className: iconClass,
                        onClick: !disabled ? toggleShowCalendar : undefined,
                        style: disabled ? {
                            cursor: 'default',
                            color: 'rgb(118, 118, 118)'
                        } : {
                            cursor: 'pointer',
                            color: 'rgb(241, 241, 241)'
                        }
                    }),
                    selectedDate !== undefined && !cleanLabel ? /*#__PURE__*/ _jsx(CalendarLabel, {
                        children: !cleanLabel ? selectedDate?.toLocaleDateString() : ''
                    }) : null
                ]
            }),
            showCalendar && /*#__PURE__*/ _jsx(Callout, {
                isBeakVisible: false,
                gapSpace: 0,
                doNotLayer: false,
                target: buttonContainerRef,
                directionalHint: DirectionalHint.bottomLeftEdge,
                onDismiss: hideCalendar,
                setInitialFocus: true,
                children: /*#__PURE__*/ _jsx(FocusTrapZone, {
                    isClickableOutsideFocusTrap: true,
                    children: /*#__PURE__*/ _jsx(Calendar, {
                        onDismiss: hideCalendar,
                        showMonthPickerAsOverlay: true,
                        highlightSelectedMonth: true,
                        showGoToToday: false,
                        onSelectDate: (date)=>{
                            onSelectDate(date);
                            onSelectDateChange(date);
                        },
                        value: selectedDate,
                        // Calendar uses English strings by default. For localized apps, you must override this prop.
                        strings: defaultCalendarStrings
                    })
                })
            })
        ]
    });
});
