@use "sass:list";
@use "sass:math";
@use "../../../bulma/sass/utilities" as bulma-utilities;
@use "../../../bulma/sass/utilities/derived-variables" as bulma-vars;
@use "../../../bulma/sass/form/shared" as bulma-form;

$datepicker-background-color: var(--dropdown-content-background-color) !default;
$datepicker-radius: var(--dropdown-content-radius) !default;
$datepicker-shadow: var(--dropdown-content-shadow) !default;
$datepicker-header-color: var(--grey) !default;
$datepicker-today-border: solid 1px !default;
$datepicker-item-color: var(--grey-dark) !default;
$datepicker-item-disabled-color: var(--grey-light) !default;
$datepicker-item-hover-color: var(--scheme-invert) !default;
$datepicker-item-hover-background-color: var(--background) !default;
$datepicker-item-selected-color: var(--primary-invert) !default;
$datepicker-item-selected-background-color: var(--primary) !default;
$datepicker-colors: bulma-form.$form-colors !default;

// Map Local variables
$-css-vars-map: (
    "datepicker-background-color": $datepicker-background-color,
    "datepicker-radius": $datepicker-radius,
    "datepicker-shadow": $datepicker-shadow,
    "datepicker-header-color": $datepicker-header-color,
    "datepicker-today-border": $datepicker-today-border,
    "datepicker-item-color": $datepicker-item-color,
    "datepicker-item-disabled-color": $datepicker-item-disabled-color,
    "datepicker-item-hover-color": $datepicker-item-hover-color,
    "datepicker-item-hover-background-color": $datepicker-item-hover-background-color,
    "datepicker-item-selected-color": $datepicker-item-selected-color,
    "datepicker-item-selected-background-color": $datepicker-item-selected-background-color,
);

// Register & Export CSS Variabless
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("datepicker", $-css-vars-map);

.datepicker {
    font-size: 0.875rem;

    .dropdown,
    .dropdown-trigger {
        width: 100%;

        .input[readonly] {
            cursor: pointer;
            box-shadow: var(--input-shadow);

            &:focus,
            &.is-focused,
            &:active,
            &.is-active {
                box-shadow: var(--input-focus-box-shadow-size) var(--input-focus-box-shadow-color)
            }
        }
    }

    // unset opacity when dropdow is disabled
    .dropdown {
        &.is-disabled {
            opacity: 1;
        }
    }

    .dropdown-content {
        background-color: var(--datepicker-background-color);
        border-radius: var(--datepicker-radius);
        box-shadow: var(--datepicker-shadow);
    }

    .dropdown-item {
        font-size: inherit;
    }

    .datepicker-header {
        padding-bottom: 0.875rem;
        margin-bottom: 0.875rem;
        border-bottom: 1px solid var(--grey-lighter);
    }

    .datepicker-footer {
        padding-top: 0.875rem;
        margin-top: 0.875rem;
        border-top: 1px solid var(--grey-lighter);
    }

    .datepicker-table {
        display: table;
        margin: 0 auto;

        .datepicker-cell {
            display: table-cell;
            padding: 0.5rem 0.75rem;
            text-align: center;
            vertical-align: middle;
            border-radius: var(--radius);
        }

        .datepicker-header {
            display: table-header-group;

            .datepicker-cell {
                font-weight: var(--weight-semibold);
                color: var(--datepicker-header-color);
            }
        }

        .datepicker-body {
            display: table-row-group;

            .datepicker-row {
                display: table-row;
            }

            .datepicker-months {
                display: inline-flex;
                flex-flow: row wrap;
                width: 17rem;

                .datepicker-cell {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: math.div(100, 3) * 1%;
                    height: 2.5rem;
                }
            }

            .datepicker-cell {
                &.is-unselectable {
                    color: var(--datepicker-item-disabled-color);
                }

                &.is-today {
                    --datepicker-today-border-color: #{bulma-utilities.bulmaVarOpacity(primary, 0.5)};

                    border: var(--datepicker-today-border) var(--datepicker-today-border-color);
                }

                &.is-selectable {
                    color: var(--datepicker-item-color);

                    &:hover:not(.is-selected),
                    &:focus:not(.is-selected) {
                        color: var(--datepicker-item-hover-color);
                        cursor: pointer;
                        background-color: var(--datepicker-item-hover-background-color);
                    }

                    &.is-within-hovered-range {
                        &.is-first-hovered {
                            color: var(--grey-lighter);
                            background-color: var(--grey);
                            border-top-right-radius: 0;
                            border-bottom-right-radius: 0;
                        }

                        &.is-within-hovered {
                            color: var(--datepicker-item-hover-color);
                            background-color: var(--datepicker-item-hover-background-color);
                            border-radius: 0;
                        }

                        &.is-last-hovered {
                            color: var(--grey-lighter);
                            background-color: var(--grey);
                            border-top-left-radius: 0;
                            border-bottom-left-radius: 0;
                        }
                    }
                }

                &.is-selected {
                    color: var(--datepicker-item-selected-color);
                    background-color: var(--datepicker-item-selected-background-color);

                    &.is-first-selected {
                        color: var(--datepicker-item-selected-color);
                        background-color: var(--datepicker-item-selected-background-color);
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }

                    &.is-within-selected {
                        --datepicker-item-selected-background-color: #{bulma-utilities.bulmaVarOpacity(primary, 0.5)};

                        background-color: var(--datepicker-item-selected-background-color);
                        border-radius: 0;
                    }

                    &.is-last-selected {
                        color: var(--datepicker-item-selected-color);
                        background-color: var(--datepicker-item-selected-background-color);
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }

                &.is-nearby:not(.is-selected) {
                    color: var(--grey-light);
                }

                &.is-week-number {
                    cursor: default;
                }
            }

            &.has-events {
                .datepicker-cell {
                    padding: 0.3rem 0.75rem 0.75rem;

                    &.has-event {
                        position: relative;

                        .events {
                            position: absolute;
                            bottom: .425rem;
                            left: 0;
                            display: flex;
                            justify-content: center;
                            width: 100%;
                            padding: 0 .35rem;

                            .event {
                                @each $name, $pair in $datepicker-colors {
                                    $color: list.nth($pair, 1);
                                    &.is-#{$name} {
                                        background-color: var(--#{$name});
                                    }
                                }
                            }
                        }

                        &.dots .event {
                            width: .35em;
                            height: .35em;
                            margin: 0 .1em;
                            border-radius: 50%;
                        }

                        &.bars .event {
                            width: 100%;
                            height: .25em;
                        }
                    }

                    &.is-selected {
                        overflow: hidden;

                        .events .event {
                            // Currently datepicker only uses primary coloring
                            // Ensure indicator is visible when selected
                            &.is-primary {
                                --datepicker-background-color-selected: #{bulma-utilities.bulmaVarLighten(primary, 15%)};

                                background-color: var(--datepicker-background-color-selected);
                            }
                        }
                    }
                }
            }
        }
    }

    @include bulma-utilities.control-sizes;

    @include bulma-utilities.desktop {
        .footer-horizontal-timepicker {
            display: flex;
            padding-left: 10px;
            margin-left: 5px;
            border: none;
        }

        .dropdown-horizontal-timepicker {
            display: flex;
        }

        .content-horizontal-timepicker {
            border-right: 1px solid #dbdbdb;
        }
    }
}