import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from '../../../components/icon/index.js';
import { cn } from '../../../../scalars/lib/index.js';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@radix-ui/react-tabs';
import { Calendar } from '../date-picker/subcomponents/calendar/calendar.js';
import TimePickerContent from '../time-picker/subcomponents/time-picker-content.js';
const DateTimePickerContent = ({ className, activeTab, onChangeTabs, 
// Date Picker Field
date, handleDateSelect, disabledDates, weekStartDay, handleDayClick, 
// Time Picker Field
selectedHour, selectedMinute, selectedPeriod, setSelectedHour, setSelectedMinute, setSelectedPeriod, onSave, onCancel, hours, minutes, timeZonesOptions, selectProps, is12HourFormat, isDisableSelect, selectedTimeZone, setSelectedTimeZone, timeZone, }) => {
    return (_jsx("div", { className: cn('mx-auto w-full max-w-md', 'date-time-picker__content', className), children: _jsxs(Tabs, { value: activeTab, onValueChange: onChangeTabs, className: "w-full date-time-picker__tabs", children: [_jsxs(TabsList, { className: "mb-4 grid h-8 w-full grid-cols-2 bg-white", children: [_jsx(TabsTrigger, { "data-selected": activeTab === 'date', value: "date", className: cn('relative transition-all duration-200', 'flex h-full items-center justify-center', 'border-b-2', activeTab === 'date'
                                ? 'border-gray-900 font-medium text-gray-900'
                                : 'border-gray-100 text-gray-300 hover:border-gray-100 hover:text-gray-300'), children: _jsx(Icon, { name: "CalendarTime", className: "h-6 w-6" }) }), _jsx(TabsTrigger, { "data-selected": activeTab === 'time', value: "time", className: cn('relative transition-all duration-200', 'flex h-full items-center justify-center', 'border-b-2', activeTab === 'time'
                                ? 'border-gray-900 font-medium text-gray-900'
                                : 'border-transparent text-gray-300 hover:border-gray-100 hover:text-gray-300'), children: _jsx(Icon, { name: "Clock", className: "h-6 w-6" }) })] }), _jsx(TabsContent, { value: "date", children: _jsx(Calendar, { mode: "single", required: true, selected: date, weekStartsOn: weekStartDay, onSelect: handleDateSelect, disabled: disabledDates, onDayClick: handleDayClick, className: cn('w-full', 'p-0', 
                        // dark
                        'dark:text-gray-500', 
                        // custom styles
                        'font-inter', 'text-[14px]', 'font-semibold', 'leading-[22px]'), weekdaysClassName: cn('h-[34px]', 'gap-x-[3px]', 'dark:text-gray-600'), monthGridClassName: cn('w-full', 'px-[5.5px]'), dayClassName: cn('w-[34px] cursor-pointer text-[12px] text-gray-900 hover:rounded-[4px] hover:bg-gray-200', 
                        // dark
                        'dark:text-gray-50 dark:hover:bg-gray-900', 
                        // disabled
                        'disabled:text-gray-300', 
                        // Remove hover when selected
                        'aria-selected:hover:bg-gray-900 dark:aria-selected:hover:bg-gray-50', 
                        // Selected state
                        'aria-selected:!bg-gray-900 aria-selected:!text-white', 
                        // Dark mode selected state
                        'dark:aria-selected:!bg-gray-50 dark:aria-selected:!text-gray-900'), buttonPreviousClassName: cn('border border-gray-200', 
                        // hover
                        'hover:bg-gray-100  hover:border-gray-300 hover:text-gray-900 dark:hover:bg-gray-900', 
                        // dark
                        'dark:border-gray-900 dark:text-gray-300'), buttonNextClassName: cn('border border-gray-200 ', 
                        // hover
                        'hover:bg-gray-100  hover:border-gray-300 hover:text-gray-900 dark:hover:bg-gray-900', 
                        // dark
                        'dark:border-gray-900 dark:text-gray-300'), todayClassName: cn('rounded-[4px]', 'bg-gray-100', 
                        // dark
                        'dark:bg-gray-900 dark:text-gray-50'), selectedClassName: cn('rounded-[4px]', '!bg-gray-900 !text-white', 'hover:bg-gray-900 hover:text-white', 
                        // dark
                        'dark:bg-gray-50 dark:text-gray-900', 'dark:hover:bg-gray-50 dark:hover:text-gray-900'), dayButtonClassName: cn('text-[12px] font-medium'), weekClassName: cn('w-full'), disabledClassName: cn('!text-gray-300 !cursor-not-allowed hover:!bg-transparent [&>button]:hover:!bg-transparent') }) }), _jsx(TabsContent, { value: "time", children: _jsx(TimePickerContent, { selectedHour: selectedHour, selectedMinute: selectedMinute, selectedPeriod: selectedPeriod, setSelectedHour: setSelectedHour, setSelectedMinute: setSelectedMinute, setSelectedPeriod: setSelectedPeriod, hours: hours, minutes: minutes, onSave: onSave, onCancel: onCancel, timeZonesOptions: timeZonesOptions, is12HourFormat: is12HourFormat, isDisableSelect: isDisableSelect, selectedTimeZone: selectedTimeZone, setSelectedTimeZone: setSelectedTimeZone, timeZone: timeZone, selectProps: selectProps }) })] }) }));
};
export default DateTimePickerContent;
//# sourceMappingURL=date-time-picker-content.js.map