@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/date-picker';

@mixin msk-date-picker {
    @include date-picker.date-picker;

    .#{$prefix}--date-picker {
        $icon-calendar: 'calendar_today';

        gap: m.msk-rem(16px);

        // default input styles
        .#{$prefix}--date-picker__input {
            @include m.msk-input-default;

            --#{$prefix}-code-02-font-family: #{v.$msk--global-font-family};

            &:disabled {
                color: tk.$msk--color-content-disabled;
                border-color: tk.$msk--color-border-disabled;

                &::placeholder {
                    color: tk.$msk--color-content-disabled;
                }
            }
        }

        // add msk calendar icon
        &.#{$prefix}--date-picker--range,
        &.#{$prefix}--date-picker--single {
            .#{$prefix}--date-picker__icon {
                visibility: hidden;
            }

            .#{$prefix}--label--disabled {
                color: tk.$msk--color-content-disabled;

                + .#{$prefix}--date-picker-input__wrapper::after {
                    color: tk.$msk--color-content-disabled;
                }
            }
            .#{$prefix}--date-picker-input__wrapper {
                position: relative;

                &::after {
                    color: tk.$msk--color-content-input-secondary;
                    z-index: 0;
                    content: $icon-calendar;
                    font-family: msk-icon;
                    font-size: m.msk-rem(24px);
                    position: absolute;
                    right: m.msk-rem(16px);
                    top: 50%;
                    transform: translateY(-50%);
                }

                &.#{$prefix}--date-picker-input__wrapper--invalid {
                    &::after {
                        color: tk.$msk--color-content-error;
                    }
                }
            }
        }
        .#{$prefix}--date-picker__input[data-invalid]:not(:focus) {
            @include m.msk-input-invalid;
        }

        // add width to simple
        &.#{$prefix}--date-picker--simple {
            .#{$prefix}--date-picker__input,
            .#{$prefix}--label {
                width: m.msk-rem(160px);
            }
        }
    }

    // add width to range for calendar icon to not overlap
    .#{$prefix}--date-picker--range .#{$prefix}--date-picker-container,
    .#{$prefix}--date-picker--range .#{$prefix}--date-picker__input {
        // width: m.msk-rem(200px);
        width: 100%;
    }

    /* ----- calendar dropdown ----- */
    .flatpickr-calendar {
        border-radius: m.msk-rem(4px);

        &.open {
            background-color: c.$msk--white-0;
            box-shadow: v.$msk--elevation-plus-03;
        }

        // top row of calendar
        .flatpickr-weekday {
            color: c.$msk--gray-50;
        }

        .flatpickr-months {
            font-family: v.$msk--global-font-family;
            justify-content: flex-start;

            .flatpickr-month {
                --#{$prefix}-heading-compact-01-font-weight: 400;
                --#{$prefix}-heading-compact-01-font-size: #{v.$msk--size-2};

                .cur-month {
                    line-height: 1;
                }
            }

            .numInput.cur-year {
                // @include m.msk-input-default;
                background-color: transparent;
                // border: none;
                font-weight: 400;
            }

            .flatpickr-next-month,
            .flatpickr-prev-month {
                svg {
                    display: none;
                }

                &::after {
                    color: c.$msk--blue-60;
                    font-family: msk-icon;
                    position: absolute;
                }
            }

            .flatpickr-next-month {
                &::after {
                    content: 'chevron_right';
                    right: m.msk-rem(8px);
                }
            }

            .flatpickr-prev-month {
                &::after {
                    content: 'chevron_left';
                    left: m.msk-rem(8px);
                }
            }
        }
    }

    // calendar days
    .flatpickr-day {
        --#{$prefix}-body-compact-01-font-weight: 500;

        &:not(.selected):hover {
            background-color: c.$msk--blue-10;
        }

        &.#{$prefix}--date-picker__day {
            color: c.$msk--gray-80;
            font-size: v.$msk--size-0;

            &.prevMonthDay,
            &.nextMonthDay {
                color: c.$msk--gray-50;
            }
        }

        &.inRange {
            background-color: c.$msk--blue-10;
        }

        // selected day
        &.selected {
            background-color: c.$msk--blue-60;
            color: c.$msk--white-0;
        }

        // today's day
        &.today {
            font-weight: 500;
        }
    }
}