@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/derived-variables" as dv;
@use "bulma/sass/utilities/controls" as controls;
@use "bulma/sass/form/shared";

$datepicker-background-color: cv.getVar("scheme-main") !default;
$datepicker-radius: cv.getVar("radius") !default;
$datepicker-shadow: cv.getVar("shadow") !default;
$datepicker-header-color: cv.getVar("grey") !default;
$datepicker-today-border: solid 1px cv.getRgbaVar('primary', 0.5) !default;
$datepicker-item-color: cv.getVar("text") !default;
$datepicker-item-disabled-color: cv.getVar("text-weak") !default;
$datepicker-item-hover-color: cv.getVar("primary-light-invert") !default;
$datepicker-item-hover-background-color: cv.getVar("primary-light") !default;
$datepicker-item-selected-color: cv.getVar("primary-invert") !default;
$datepicker-item-selected-background-color: cv.getVar("primary") !default;

.#{iv.$class-prefix}datepicker {
  
    @include cv.register-vars(
      (
        "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}
      )
    )
}

.#{iv.$class-prefix}datepicker {
    font-size: 0.875rem;
    .dropdown,
    .dropdown-trigger {
        width: 100%;
        .input[readonly] {
            cursor: pointer;
            box-shadow: cv.getVar("input-shadow");
            &:focus,
            &.is-focused,
            &:active,
            &.is-active {
                box-shadow: cv.getVar("input-focus-box-shadow-size") cv.getVar("input-focus-box-shadow-color");
            }
        }
    }
    // unset opacity when dropdow is disabled
    .dropdown {
        &.is-disabled {
            opacity: 1;
        }
    }
    .dropdown-content {
        background-color: cv.getVar("datepicker-background-color");
        border-radius: cv.getVar("datepicker-radius");
        box-shadow: cv.getVar("datepicker-shadow");
    }
    .dropdown-item {
        font-size: inherit;
    }
    .datepicker-header {
        padding-bottom: 0.875rem;
        margin-bottom: 0.875rem;
        border-bottom: 1px solid cv.getVar("grey-lighter");
    }
    .datepicker-footer {
        margin-top: 0.875rem;
        padding-top: 0.875rem;
        border-top: 1px solid cv.getVar("grey-lighter");
    }
    .datepicker-table {
        display: table;
        margin: 0 auto 0 auto;
        .datepicker-cell {
            text-align: center;
            vertical-align: middle;
            display: table-cell;
            border-radius: cv.getVar("radius");
            padding: 0.5rem 0.75rem;
        }
        .datepicker-header {
            display: table-header-group;
            .datepicker-cell {
                color: cv.getVar("datepicker-header-color");
                font-weight: cv.getVar("weight-semibold");
            }
        }
        .datepicker-body {
            display: table-row-group;
            .datepicker-row {
                display: table-row;
            }
            .datepicker-months {
                display: inline-flex;
                flex-wrap: wrap;
                flex-direction: row;
                width: 17rem;
                .datepicker-cell {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 33.33%;
                    height: 2.5rem;
                }
            }
            .datepicker-cell {
                &.is-unselectable {
                    color: cv.getVar("datepicker-item-disabled-color");
                }
                &.is-today {
                    border: cv.getVar("datepicker-today-border");
                }
                &.is-selectable {
                    color: cv.getVar("datepicker-item-color");
                    font-weight: cv.getVar("weight-semibold");
                    &:hover:not(.is-selected),
                    &:focus:not(.is-selected) {
                        background-color: cv.getVar("datepicker-item-hover-background-color");
                        color: cv.getVar("datepicker-item-hover-color");
                        cursor: pointer;
                    }
                    &.is-within-hovered-range {
                        &.is-first-hovered {
                            background-color: cv.getVar("grey");
                            color: cv.getVar("grey-lighter");
                            border-bottom-right-radius: 0;
                            border-top-right-radius: 0;
                        }
                        &.is-within-hovered {
                            background-color: cv.getVar("datepicker-item-hover-background-color");
                            color: cv.getVar("datepicker-item-hover-color");
                            border-radius: 0;
                        }
                        &.is-last-hovered {
                            background-color: cv.getVar("grey");
                            color: cv.getVar("grey-lighter");
                            border-bottom-left-radius: 0;
                            border-top-left-radius: 0;
                        }
                    }
                }
                &.is-selected {
                    background-color: cv.getVar("datepicker-item-selected-background-color");
                    color: cv.getVar("datepicker-item-selected-color");
                    &.is-first-selected {
                        background-color: cv.getVar("datepicker-item-selected-background-color");
                        color: cv.getVar("datepicker-item-selected-color");
                        border-bottom-right-radius: 0;
                        border-top-right-radius: 0;
                    }
                    &.is-within-selected {
                        background-color: rgb(from $datepicker-item-selected-background-color r g b / 0.5);
                        border-radius: 0;
                    }
                    &.is-last-selected {
                        background-color: cv.getVar("datepicker-item-selected-background-color");
                        color: cv.getVar("datepicker-item-selected-color");
                        border-bottom-left-radius: 0;
                        border-top-left-radius: 0;
                    }
                }
                &.is-nearby:not(.is-selected) {
                    color: cv.getVar("grey");
                }
                &.is-week-number {
                    cursor: default;
                }
            }
            &.has-events {
                .datepicker-cell {
                    padding: 0.3rem 0.75rem 0.75rem;
                    &.has-event {
                        position: relative;
                        .events {
                            bottom: .425rem;
                            display: flex;
                            justify-content: center;
                            left: 0;
                            padding: 0 .35rem;
                            position: absolute;
                            width: 100%;
                            .event {
                                @each $name, $pair in shared.$form-colors {
                                    &.is-#{$name} {
                                        background-color: cv.getVar($name);
                                    }
                                }
                            }
                        }
                        &.dots .event {
                            border-radius: 50%;
                            height: .35em;
                            margin: 0 .1em;
                            width: .35em;
                        }
                        &.bars .event {
                            height: .25em;
                            width: 100%;
                        }
                    }
                    &.is-selected {
                        overflow: hidden;
                        .events .event {
                            // Currently datepicker only uses primary coloring
                            // Ensure indicator is visible when selected
                            &.is-primary {
                                background-color: cv.getVar("primary-light");
                            }
                        }
                    }
                }
            }
        }
    }
    &.is-small {
        @include controls.control-small;
    }
    &.is-medium {
        @include controls.control-medium;
    }
    &.is-large {
        @include controls.control-large;
    }
    @media screen and (min-width: iv.$desktop){
        .footer-horizontal-timepicker {
            border: none;
            padding-left: 10px;
            margin-left: 5px;
            display: flex;
        }
        .dropdown-horizontal-timepicker {
            display: flex;
        }
        .content-horizontal-timepicker {
            border-right: 1px solid #dbdbdb;
        }
    }
}