import apollo_core from "@uipath/apollo-core";
const dayFocusIndicatorSize = 3;
const MuiDatepicker = (palette)=>({
        root: {
            '&.MuiPickersPopper-root': {
                '.MuiPickersPopper-paper': {
                    backgroundColor: palette.semantic.colorBackgroundRaised,
                    backgroundImage: 'unset',
                    '& .MuiDateCalendar-root': {
                        userSelect: 'none',
                        width: '310px',
                        height: 'auto',
                        maxHeight: 'none',
                        '--date-picker-day-size': apollo_core.Spacing.SpacingXl,
                        '--date-picker-weeks-rows-gap': apollo_core.Spacing.SpacingXs,
                        '--date-picker-days-gap': apollo_core.Spacing.SpacingXs
                    },
                    '& .MuiPickersSlideTransition-root': {
                        '--date-picker-day-rows-count': '4',
                        marginTop: `-${dayFocusIndicatorSize}px`,
                        minHeight: 0,
                        overflow: 'hidden',
                        marginBottom: apollo_core.Spacing.SpacingBase,
                        transition: '0.2s all',
                        height: `calc(
                        (var(--date-picker-day-rows-count) * var(--date-picker-day-size)) +
                        ((var(--date-picker-day-rows-count) - 1) * var(--date-picker-weeks-rows-gap)) +
                        ${2 * dayFocusIndicatorSize}px
                    )`,
                        '&:has(div[aria-rowindex="5"])': {
                            '--date-picker-day-rows-count': '5'
                        },
                        '&:has(div[aria-rowindex="6"])': {
                            '--date-picker-day-rows-count': '6'
                        }
                    },
                    '& .MuiPickersFadeTransitionGroup-root:has(.MuiYearCalendar-root)': {
                        height: '280px'
                    },
                    '& .MuiPickersCalendarHeader-root': {
                        paddingRight: '14px'
                    },
                    '& .MuiPickersCalendarHeader-switchViewButton, & .MuiPickersArrowSwitcher-button': {
                        width: apollo_core.Spacing.SpacingXl,
                        height: apollo_core.Spacing.SpacingXl,
                        padding: 0,
                        '&:focus-visible': {
                            outlineColor: `${palette.semantic.colorFocusIndicator} !important`
                        },
                        '&:hover': {
                            backgroundColor: palette.semantic.colorBackgroundHover
                        }
                    },
                    '& .MuiDayCalendar-header': {
                        maxHeight: 'var(--date-picker-day-size)',
                        borderBottom: `1px solid ${palette.semantic.colorBorderDeEmp}`,
                        marginBottom: apollo_core.Spacing.SpacingS,
                        gap: apollo_core.Spacing.SpacingXs
                    },
                    '& .MuiDayCalendar-weekDayLabel': {
                        width: 'var(--date-picker-day-size)',
                        height: 'var(--date-picker-day-size)',
                        margin: 0,
                        color: palette.semantic.colorForegroundDeEmp
                    },
                    '& .MuiDayCalendar-monthContainer': {
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 'var(--date-picker-weeks-rows-gap)',
                        overflow: 'visible',
                        marginTop: `${dayFocusIndicatorSize}px`
                    },
                    '& .MuiDayCalendar-weekContainer': {
                        gap: 'var(--date-picker-days-gap)',
                        margin: 0
                    },
                    '& .MuiPickersDay-root': {
                        width: 'var(--date-picker-day-size)',
                        height: 'var(--date-picker-day-size)',
                        fontWeight: apollo_core.FontFamily.FontWeightSemibold,
                        backgroundColor: 'transparent',
                        color: palette.semantic.colorForegroundDeEmp,
                        fontSize: apollo_core.FontFamily.FontMSize,
                        margin: 0,
                        '&:focus-visible': {
                            outline: `2px ${palette.semantic.colorFocusIndicator} solid !important`,
                            outlineOffset: '1px'
                        },
                        '&:hover': {
                            backgroundColor: palette.semantic.colorBackgroundHover
                        },
                        '&.MuiPickersDay-today': {
                            borderColor: palette.semantic.colorForegroundDeEmp,
                            backgroundColor: 'transparent',
                            '&:hover': {
                                backgroundColor: palette.semantic.colorBackgroundHover
                            }
                        },
                        '&.Mui-disabled': {
                            color: palette.semantic.colorForegroundDisable
                        },
                        '&.Mui-selected': {
                            backgroundColor: palette.semantic.colorPrimary,
                            color: palette.semantic.colorForegroundOnAccent,
                            '&:hover': {
                                backgroundColor: palette.semantic.colorPrimary
                            }
                        }
                    },
                    '& .MuiPickersYear-root': {
                        height: '48px'
                    },
                    '& .MuiPickersYear-yearButton': {
                        width: '56px',
                        height: '32px',
                        borderRadius: apollo_core.Border.BorderRadiusS,
                        backgroundColor: 'transparent',
                        color: palette.semantic.colorForegroundDeEmp,
                        fontSize: apollo_core.FontFamily.FontMSize,
                        fontWeight: apollo_core.FontFamily.FontWeightSemibold,
                        lineHeight: apollo_core.FontFamily.FontMLineHeight,
                        '&:focus-visible': {
                            outline: `2px ${palette.semantic.colorFocusIndicator} solid !important`,
                            outlineOffset: '2px'
                        },
                        '&:hover': {
                            backgroundColor: palette.semantic.colorBackgroundHover
                        },
                        '&.Mui-selected': {
                            backgroundColor: palette.semantic.colorPrimary,
                            color: palette.semantic.colorForegroundOnAccent,
                            '&:hover': {
                                backgroundColor: palette.semantic.colorPrimary
                            }
                        }
                    }
                },
                '&[data-popper-placement^="top"] .MuiPickersPopper-paper .MuiPickersSlideTransition-root': {
                    transitionDelay: '0.7s'
                }
            }
        }
    });
export { MuiDatepicker };
