@use "sass:list";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$datepicker-font-size: h.useVar("font-size") !default;
$datepicker-box-padding: 0 calc(2 * h.useVar("control-spacer")) !default;

$datepicker-border-width: h.useVar("control-border-width") !default;
$datepicker-border-style: solid !default;
$datepicker-border-color: h.useVar("control-border-color") !default;

$datepicker-header-padding: h.useVar("control-spacer") 0 !default;
$datepicker-header-spacer: h.useVar("control-spacer") !default;

$datepicker-footer-padding: h.useVar("control-spacer") !default;
$datepicker-footer-spacer: h.useVar("control-spacer") !default;

$datepicker-button-height: 2.25em !default;
$datepicker-button-min-width: 2.25em !default;

$datepicker-table-header-font-weight: 600 !default;

$datepicker-table-cell-padding: 0.5rem 0.75rem !default;
$datepicker-table-cell-border-radius: h.useVar("border-radius") !default;

$datepicker-table-cell-selectable-color: h.useVar("font-color") !default;
$datepicker-table-cell-unselectable-color: h.useVar("grey-light") !default;
$datepicker-table-cell-nearby-color: h.useVar("grey-light") !default;
$datepicker-table-cell-today-border: solid 1px rgba(h.useVar("primary"), 0.5) !default;

$datepicker-table-cell-selected-color: h.useVar("primary-invert") !default;
$datepicker-table-cell-selected-background-color: h.useVar("primary") !default;
$datepicker-table-cell-selected-within-background-color: rgb(
    from $datepicker-table-cell-selected-background-color r g b / 50%
) !default;
$datepicker-table-cell-hovered-color: h.useVar("white") !default;
$datepicker-table-cell-hovered-background-color: h.useVar("grey") !default;
$datepicker-table-cell-hovered-within-background-color: rgb(
    from $datepicker-table-cell-hovered-background-color r g b / 50%
) !default;

$datepicker-table-cell-events-padding: 0.3rem 0.75rem 0.75rem !default;

$datepicker-event-background-color: h.useVar("grey-light") !default;
$datepicker-event-dots-size: 0.35em !default;
$datepicker-event-dots-margin: 0 0.1em !default;
$datepicker-event-bars-height: 0.25em !default;
/* @docs */

.o-datepicker {
    @include h.defineVar("datepicker-font-size", $datepicker-font-size);
    @include h.defineVar("datepicker-box-padding", $datepicker-box-padding);
    @include h.defineVar("datepicker-border-width", $datepicker-border-width);
    @include h.defineVar("datepicker-border-style", $datepicker-border-style);
    @include h.defineVar("datepicker-border-color", $datepicker-border-color);

    @include h.defineVar(
        "datepicker-header-padding",
        $datepicker-header-padding
    );
    @include h.defineVar("datepicker-header-spacer", $datepicker-header-spacer);
    @include h.defineVar(
        "datepicker-footer-padding",
        $datepicker-footer-padding
    );
    @include h.defineVar("datepicker-footer-spacer", $datepicker-footer-spacer);

    @include h.defineVar("datepicker-button-height", $datepicker-button-height);
    @include h.defineVar(
        "datepicker-button-min-width",
        $datepicker-button-min-width
    );

    @include h.defineVar(
        "datepicker-table-header-font-weight",
        $datepicker-table-header-font-weight
    );
    @include h.defineVar(
        "datepicker-table-cell-padding",
        $datepicker-table-cell-padding
    );
    @include h.defineVar(
        "datepicker-table-cell-border-radius",
        $datepicker-table-cell-border-radius
    );

    @include h.defineVar(
        "datepicker-table-cell-selectable-color",
        $datepicker-table-cell-selectable-color
    );
    @include h.defineVar(
        "datepicker-table-cell-unselectable-color",
        $datepicker-table-cell-unselectable-color
    );
    @include h.defineVar(
        "datepicker-table-cell-nearby-color",
        $datepicker-table-cell-nearby-color
    );
    @include h.defineVar(
        "datepicker-table-cell-today-border",
        $datepicker-table-cell-today-border
    );

    @include h.defineVar(
        "datepicker-table-cell-selected-color",
        $datepicker-table-cell-selected-color
    );
    @include h.defineVar(
        "datepicker-table-cell-selected-background-color",
        $datepicker-table-cell-selected-background-color
    );
    @include h.defineVar(
        "datepicker-table-cell-selected-within-background-color",
        $datepicker-table-cell-selected-within-background-color
    );
    @include h.defineVar(
        "datepicker-table-cell-hovered-color",
        $datepicker-table-cell-hovered-color
    );
    @include h.defineVar(
        "datepicker-table-cell-hovered-background-color",
        $datepicker-table-cell-hovered-background-color
    );
    @include h.defineVar(
        "datepicker-table-cell-hovered-within-background-color",
        $datepicker-table-cell-hovered-within-background-color
    );
    @include h.defineVar(
        "datepicker-table-cell-events-padding",
        $datepicker-table-cell-events-padding
    );

    @include h.defineVar(
        "datepicker-event-background-color",
        $datepicker-event-background-color
    );
    @include h.defineVar(
        "datepicker-event-dots-size",
        $datepicker-event-dots-size
    );
    @include h.defineVar(
        "datepicker-event-dots-margin",
        $datepicker-event-dots-margin
    );
    @include h.defineVar(
        "datepicker-event-bars-height",
        $datepicker-event-bars-height
    );

    // size variants
    @each $name, $value in vars.$sizes {
        &--#{$name} {
            @include h.defineVar(
                "datepicker-font-size",
                h.useVar("size-#{$name}")
            );
        }
    }

    font-size: h.useVar("datepicker-font-size");

    &__dropdown {
        width: 100%;

        .o-dropdown__menu {
            min-width: 12rem;
        }
    }

    &__box {
        padding: h.useVar("datepicker-box-padding");
    }

    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        min-width: max-content;
        gap: h.useVar("datepicker-header-spacer");

        padding: h.useVar("datepicker-header-padding");

        border-bottom-color: h.useVar("datepicker-border-color");
        border-bottom-style: h.useVar("datepicker-border-style");
        border-bottom-width: h.useVar("datepicker-border-width");

        &__previous {
            order: 1;
        }

        &__next {
            order: 3;
        }

        &__previous,
        &__next {
            min-width: h.useVar("datepicker-button-min-width");
            height: h.useVar("datepicker-button-height");
        }

        &__list {
            order: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            list-style: none;
            gap: inherit;
            margin: 0;
            padding: 0;
        }
    }

    &__footer {
        display: flex;
        justify-content: space-between;
        text-align: center;
        min-width: max-content;
        gap: h.useVar("datepicker-header-spacer");

        padding: h.useVar("datepicker-footer-padding");

        border-top-color: h.useVar("datepicker-border-color");
        border-top-style: h.useVar("datepicker-border-style");
        border-top-width: h.useVar("datepicker-border-width");
    }

    &__table,
    &__month {
        display: table;
        margin: 0 auto 0 auto;

        &__head {
            display: table-header-group;
            font-weight: h.useVar("datepicker-table-header-font-weight");
        }

        &__body {
            display: table-row-group;
        }

        &__row {
            display: table-row;
        }

        &__cell {
            text-align: center;
            vertical-align: middle;
            display: table-cell;
            text-decoration: none;

            border-radius: h.useVar("datepicker-table-cell-border-radius");
            padding: h.useVar("datepicker-table-cell-padding");

            &--selectable {
                // add clickable cursor
                @include h.clickable;

                color: h.useVar("datepicker-table-cell-selectable-color");
            }

            &--unselectable {
                color: h.useVar("datepicker-table-cell-unselectable-color");
            }

            &--nearby:not(&--selected) {
                color: h.useVar("datepicker-table-cell-nearby-color");
            }

            &--today {
                border: h.useVar("datepicker-table-cell-today-border");
            }

            &--first-hovered {
                color: h.useVar("datepicker-table-cell-hovered-color");
                background-color: h.useVar(
                    "datepicker-table-cell-hovered-background-color"
                );
                border-bottom-right-radius: 0;
                border-top-right-radius: 0;
            }

            &--within-hovered {
                background-color: h.useVar(
                    "datepicker-table-cell-hovered-within-background-color"
                );
                color: h.useVar("datepicker-table-cell-hovered-color");
                border-radius: 0;
            }

            &--last-hovered {
                color: h.useVar("datepicker-table-cell-hovered-color");
                background-color: h.useVar(
                    "datepicker-table-cell-hovered-background-color"
                );
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
            }

            &--selected:not(&--first-hovered):not(&--within-hovered):not(
                    &--last-hovered
                ) {
                color: h.useVar("datepicker-table-cell-selected-color");
                background-color: h.useVar(
                    "datepicker-table-cell-selected-background-color"
                );
            }

            &--first-selected:not(&--first-hovered):not(&--within-hovered):not(
                    &--last-hovered
                ) {
                background-color: h.useVar(
                    "datepicker-table-cell-selected-background-color"
                );
                color: h.useVar("datepicker-table-cell-selected-color");
                border-bottom-right-radius: 0;
                border-top-right-radius: 0;
            }

            &--within-selected:not(&--first-hovered):not(&--within-hovered):not(
                    &--last-hovered
                ) {
                background-color: h.useVar(
                    "datepicker-table-cell-selected-within-background-color"
                );
                border-radius: 0;
            }

            &--last-selected:not(&--first-hovered):not(&--within-hovered):not(
                    &--last-hovered
                ) {
                background-color: h.useVar(
                    "datepicker-table-cell-selected-background-color"
                );
                color: h.useVar("datepicker-table-cell-selected-color");
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
            }

            &--invisible {
                visibility: hidden;
            }

            &--events {
                position: relative;
                padding: h.useVar("datepicker-table-cell-events-padding");
            }
        }

        &__events {
            display: flex;
            justify-content: center;
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 15%;
        }

        &__event {
            background-color: h.useVar("datepicker-event-background-color");

            // color variants
            @each $name, $pair in vars.$colors {
                &--#{$name} {
                    @include h.defineVar(
                        "datepicker-event-background-color",
                        h.useVar($name)
                    );
                }
            }

            &--dots {
                border-radius: 50%;
                margin: h.useVar("datepicker-event-dots-margin");
                height: h.useVar("datepicker-event-dots-size");
                width: h.useVar("datepicker-event-dots-size");
            }

            &--bars {
                height: h.useVar("datepicker-event-bars-height");
                width: 100%;
            }
        }
    }

    &__month__table {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 17rem;
    }

    &__month__cell {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33.33%;
        height: 2.5rem;
    }

    &--expanded {
        width: 100%;
        flex-grow: 1;
    }

    &--mobile {
        .o-datepicker__header__previous {
            order: 1;
            flex-grow: 1;
            flex-shrink: 1;
        }

        .o-datepicker__header__next {
            order: 3;
            flex-grow: 1;
            flex-shrink: 1;
        }

        .o-datepicker__header__list {
            order: 2;
            flex-grow: 1;
            flex-shrink: 1;
        }

        .o-dropdown__menu {
            padding: 0;
        }
    }
}