import { CSSObject } from 'styled-components';
import { BreakpointType } from '../../breakpoints/breakPoints';
export type CalendarState = 'default' | 'hover' | 'active' | 'disabled';
export type CalendarSize = 'sm' | 'md' | 'lg';
/**
 * DateRangePicker Tokens following proper hierarchy pattern
 *
 * Structure:
 * - Base properties (shared across all components)
 * - Target sections: trigger, calendar, quickRange, mobileDrawer
 * - Each target has consistent sub-structure with x/y padding and state management
 *
 * Pattern:
 * - target.property.[size].[state] (for size/state-dependent properties)
 * - target.text.property (for text styling)
 * - target.padding.x/y (for consistent padding structure)
 */
export type CalendarTokenType = {
    trigger: {
        quickSelector: {
            borderRadius: {
                topLeft: CSSObject['borderTopLeftRadius'];
                topRight: CSSObject['borderTopRightRadius'];
                bottomLeft: CSSObject['borderBottomLeftRadius'];
                bottomRight: CSSObject['borderBottomRightRadius'];
            };
            backgroundColor: CSSObject['backgroundColor'];
            gap: CSSObject['gap'];
            padding: {
                [key in CalendarSize]: {
                    x: CSSObject['padding'];
                    y: CSSObject['padding'];
                };
            };
            border: {
                [key in CalendarState]: {
                    left: CSSObject['borderLeft'];
                    top: CSSObject['borderTop'];
                    bottom: CSSObject['borderBottom'];
                    right: CSSObject['borderRight'];
                };
            };
            text: {
                color: CSSObject['color'];
                fontWeight: CSSObject['fontWeight'];
                fontSize: {
                    [key in CalendarSize]: CSSObject['fontSize'];
                };
            };
            iconSize: CSSObject['width'];
        };
        dateInput: {
            borderRadius: {
                withQuickSelector: CSSObject['borderRadius'];
                withoutQuickSelector: CSSObject['borderRadius'];
            };
            padding: {
                [key in CalendarSize]: {
                    x: CSSObject['padding'];
                    y: CSSObject['padding'];
                };
            };
            text: {
                color: CSSObject['color'];
                fontSize: {
                    [key in CalendarSize]: CSSObject['fontSize'];
                };
                fontWeight: CSSObject['fontWeight'];
            };
            border: {
                [key in CalendarState]: CSSObject['border'];
            } & {
                error?: CSSObject['border'];
            };
            backgroundColor: CSSObject['backgroundColor'];
            iconSize: CSSObject['width'];
            gap: CSSObject['gap'];
        };
    };
    calendar: {
        minWidth: CSSObject['minWidth'];
        width: CSSObject['width'];
        backgroundColor: CSSObject['backgroundColor'];
        border: CSSObject['border'];
        borderRadius: CSSObject['borderRadius'];
        boxShadow: CSSObject['boxShadow'];
        header: {
            padding: {
                x: CSSObject['padding'];
                y: CSSObject['padding'];
            };
            dateInput: {
                gap: CSSObject['gap'];
                label: {
                    color: CSSObject['color'];
                    fontSize: CSSObject['fontSize'];
                    fontWeight: CSSObject['fontWeight'];
                };
            };
        };
        calendarGrid: {
            month: {
                header: {
                    fontSize: CSSObject['fontSize'];
                    fontWeight: CSSObject['fontWeight'];
                    color: CSSObject['color'];
                    padding: {
                        x: CSSObject['padding'];
                        y: CSSObject['padding'];
                    };
                    gap: CSSObject['gap'];
                };
            };
            week: {
                gap: CSSObject['gap'];
                fontSize: CSSObject['fontSize'];
                fontWeight: CSSObject['fontWeight'];
                boxShadow: CSSObject['boxShadow'];
                color: CSSObject['color'];
                padding: {
                    x: CSSObject['padding'];
                    y: CSSObject['padding'];
                };
                row: {
                    gap: CSSObject['gap'];
                };
            };
            day: {
                cell: {
                    padding: {
                        x: CSSObject['padding'];
                        y: CSSObject['padding'];
                    };
                    fontWeight: CSSObject['fontWeight'];
                    fontSize: CSSObject['fontSize'];
                    lineHeight: CSSObject['lineHeight'];
                    border: {
                        [key in CalendarState]: CSSObject['border'];
                    };
                    borderRadius: CSSObject['borderRadius'];
                };
                states: {
                    startDate: {
                        backgroundColor: CSSObject['backgroundColor'];
                        borderRadius: {
                            topLeft: CSSObject['borderTopLeftRadius'];
                            bottomLeft: CSSObject['borderBottomLeftRadius'];
                        };
                    };
                    endDate: {
                        backgroundColor: CSSObject['backgroundColor'];
                        borderRadius: {
                            topRight: CSSObject['borderTopRightRadius'];
                            bottomRight: CSSObject['borderBottomRightRadius'];
                        };
                    };
                    singleDate: {
                        backgroundColor: CSSObject['backgroundColor'];
                        borderRadius: CSSObject['borderRadius'];
                    };
                    rangeDay: {
                        backgroundColor: CSSObject['backgroundColor'];
                    };
                    todayDay: {
                        fontWeight: CSSObject['fontWeight'];
                    };
                    disabledDay: {
                        color: CSSObject['color'];
                    };
                };
                text: {
                    dayNumber: {
                        color: CSSObject['color'];
                    };
                    selectedDay: {
                        color: CSSObject['color'];
                    };
                    rangeDay: {
                        color: CSSObject['color'];
                    };
                    todayDay: {
                        color: CSSObject['color'];
                    };
                    disabledDate: {
                        color: CSSObject['color'];
                    };
                };
                todayIndicator: {
                    width: CSSObject['width'];
                    backgroundColor: CSSObject['backgroundColor'];
                };
            };
        };
        footer: {
            padding: {
                x: CSSObject['padding'];
                y: CSSObject['padding'];
            };
            borderTop: CSSObject['borderTop'];
            gap: CSSObject['gap'];
        };
    };
};
export type ResponsiveCalendarTokens = {
    [key in keyof BreakpointType]: CalendarTokenType;
};