@use '../../styles/mixins';

.storage-disk-progress-bar {
    $block: &;

    $border-width: 1px;
    $outer-border-radius: var(--disk-border-radius, var(--g-border-radius-m));
    $inner-border-radius: $outer-border-radius - $border-width;
    $outer-compact-border-radius: var(--disk-border-radius-compact, var(--g-border-radius-xs));
    $inner-compact-border-radius: $outer-compact-border-radius - $border-width;

    --progress-bar-full-height: var(--g-text-subheader-2-line-height);
    --progress-bar-compact-height: 12px;
    --ydb-progress-bar-font-color: var(--g-color-text-primary);

    --stripe-width: 4px;
    --stripe-step: 8px;

    position: relative;
    z-index: 0;

    overflow: hidden;

    min-width: 50px;
    height: var(--progress-bar-full-height);

    text-align: center;

    color: var(--g-color-text-primary);
    border: $border-width solid var(--entity-state-border-color);
    border-radius: $outer-border-radius;
    background-color: var(--entity-state-background-color);

    @include mixins.entity-state-colors($block);

    // SolidRed severity (6): solid red background for critical errors in State mode
    &_solidred {
        --entity-state-font-color: var(--g-color-text-light-primary);
        --entity-state-border-color: var(--g-color-base-danger-heavy);
        --entity-state-background-color: var(--g-color-base-danger-heavy);
        --entity-state-fill-color: var(--g-color-base-danger-heavy);
        --entity-state-icon-color: var(--g-color-text-light-primary);
        --entity-state-stripe-color: var(--g-color-text-dark-hint);

        &#{$block}_highlighted {
            --entity-state-background-color: var(--g-color-base-danger-heavy-hover);
            --entity-state-border-color: var(--g-color-base-danger-heavy-hover);
        }
    }

    &_expert-mode {
        --entity-state-compact-background-color: var(--entity-state-background-color);

        &#{$block}_light-grey {
            --entity-state-font-color: var(--g-color-text-secondary);
            --entity-state-border-color: var(--g-color-line-generic);
            --entity-state-background-color: var(--g-color-base-neutral-light);
            --entity-state-fill-color: var(--g-color-base-neutral-light);
            --entity-state-icon-color: var(--g-color-text-secondary);

            border: $border-width solid var(--entity-state-border-color);

            &#{$block}_striped,
            &#{$block}_borderless {
                border: none;
            }

            &#{$block}_highlighted {
                --entity-state-background-color: var(--g-color-base-neutral-light-hover);
                --entity-state-fill-color: var(--g-color-base-neutral-light-hover);
            }

            &#{$block}_mode-space {
                --entity-state-border-color: var(--g-color-line-generic);
                --entity-state-background-color: var(--g-color-base-generic-medium);
                --entity-state-fill-color: var(--g-color-base-neutral-medium);
                --entity-state-icon-color: rgba(162, 162, 162, 1);

                &#{$block}_filled {
                    --entity-state-icon-color: var(--ydb-progress-bar-font-color);
                }

                &#{$block}_highlighted {
                    --entity-state-background-color: var(--g-color-base-generic-medium-hover);
                    --entity-state-fill-color: var(--g-color-base-neutral-medium-hover);
                }
            }

            &#{$block}_mode-compaction,
            &#{$block}_mode-device {
                --entity-state-background-color: transparent;
                box-shadow: none;

                &#{$block}_highlighted {
                    --entity-state-background-color: var(--g-color-base-neutral-light);
                    --entity-state-stripe-background-color: var(--g-color-base-neutral-light);
                }
            }
        }
    }

    &_borderless {
        border: none;
    }

    &_overlap-icon-at-top-left {
        overflow: visible;
    }

    // State mode: specific visual variants
    &_mode-state,
    &_mode-drive,
    &_mode-decommit,
    &_mode-maintenance {
        // OK state
        &#{$block}_green {
            --entity-state-border-color: var(--g-color-base-positive-medium);
        }

        // Initial state
        &#{$block}_yellow {
            --entity-state-border-color: var(--g-color-base-warning-medium);
            --entity-state-icon-color: var(--g-color-text-warning-heavy);
        }

        // PDisk Error
        &#{$block}_red {
            --entity-state-border-color: var(--g-color-base-danger-heavy);
        }
    }

    &_mode-decommit#{$block}_blue {
        --entity-state-border-color: var(--g-color-base-info-medium);
        --entity-state-icon-color: var(--g-color-text-info);
    }

    &_mode-drivetype {
        @each $type, $theme, $intensity in (ssd misc medium, hdd utility light, nvme info light) {
            &#{$block}_#{$type} {
                --entity-state-background-color: var(--g-color-base-#{$theme}-#{$intensity});
                --ydb-progress-bar-font-color: var(--g-color-text-#{$theme});

                &#{$block}_highlighted {
                    --entity-state-background-color: var(
                        --g-color-base-#{$theme}-#{$intensity}-hover
                    );
                }
            }
        }
        #{$block}__text-label {
            overflow: hidden;
            flex-shrink: 1;

            min-width: 0;
            padding-right: var(--g-spacing-1);

            white-space: nowrap;

            mask-image: linear-gradient(
                to right,
                #000 calc(100% - var(--g-spacing-1)),
                transparent
            );
        }
    }

    &_mode-all {
        &#{$block}_green {
            --entity-state-background-color: transparent;
            --entity-state-border-color: var(--g-color-base-positive-medium);
            --entity-state-fill-color: var(--g-color-base-positive-light);

            &#{$block}_all-mode-has-issues {
                --entity-state-fill-color: var(--g-color-base-positive-medium);
                --entity-state-border-color: var(--g-color-line-positive);
            }

            &#{$block}_highlighted {
                --entity-state-border-color: var(--g-color-line-positive);
                --entity-state-background-color: var(--entity-state-fill-color);
            }
        }

        &#{$block}_yellow {
            --entity-state-background-color: transparent;
            --entity-state-border-color: var(--g-color-line-warning);
            --entity-state-icon-color: var(--g-color-base-warning-heavy);
            --entity-state-fill-color: var(--g-color-base-warning-light);

            &#{$block}_highlighted {
                --entity-state-border-color: var(--g-color-line-warning);
                --entity-state-icon-color: var(--g-color-base-warning-heavy);
                --entity-state-background-color: var(--entity-state-fill-color);
            }
        }

        &#{$block}_red {
            --entity-state-background-color: transparent;
            --entity-state-border-color: var(--g-color-line-danger);
            --entity-state-fill-color: var(--g-color-base-danger-light);

            &#{$block}_highlighted {
                --entity-state-border-color: var(--g-color-line-danger);
                --entity-state-background-color: var(--entity-state-fill-color);
            }
        }

        &#{$block}_solidred {
            --entity-state-background-color: var(--g-color-base-danger-medium);
            --entity-state-fill-color: var(--g-color-base-danger-heavy);
            --entity-state-border-color: var(--g-color-base-danger-heavy);
            --entity-state-icon-color: var(--g-color-text-primary);

            &#{$block}_highlighted {
                --entity-state-background-color: var(--g-color-base-danger-medium-hover);
                --entity-state-fill-color: var(--g-color-base-danger-heavy-hover);
                --entity-state-border-color: var(--g-color-base-danger-heavy-hover);
            }
        }

        #{$block}__fill-bar {
            border-radius: calc(var(--disk-border-radius, var(--g-border-radius-m)) - 1px) 0 0
                calc(var(--disk-border-radius, var(--g-border-radius-m)) - 1px);
        }

        #{$block}__icon_overlap-top-left {
            background-image: radial-gradient(
                circle,
                var(--g-color-base-background) 0 calc(50% - 1px),
                transparent calc(50% - 1px)
            );
        }
    }

    &_mode-space {
        --entity-state-font-color: var(--ydb-progress-bar-font-color);

        &:not(#{$block}_borderless):not(#{$block}_darkgrey) {
            --entity-state-stripe-border-color: var(--entity-state-border-color);
        }

        &#{$block}_green {
            --entity-state-border-color: var(--g-color-line-positive);
            --ydb-progress-bar-font-color: var(--g-color-text-positive-heavy);
        }

        &#{$block}_spacecyan {
            --entity-state-background-color: var(--ydb-space-cyan-bg);
            --entity-state-border-color: var(--ydb-space-cyan-text);
            --entity-state-fill-color: var(--ydb-space-cyan-fill-color);
            --ydb-progress-bar-font-color: var(--ydb-space-cyan-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-cyan-bg-hover);
                --entity-state-fill-color: var(--ydb-space-cyan-fill-color-hover);
            }
        }

        &#{$block}_spacelightyellow {
            --entity-state-background-color: var(--ydb-space-light-yellow-bg);
            --entity-state-border-color: var(
                --ydb-space-light-yellow-border,
                var(--ydb-space-light-yellow-text)
            );
            --entity-state-stripe-color: var(--ydb-space-light-yellow-stripe);
            --entity-state-fill-color: var(--ydb-space-light-yellow-fill-color);
            --ydb-progress-bar-font-color: var(--ydb-space-light-yellow-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-light-yellow-bg-hover);
                --entity-state-fill-color: var(--ydb-space-light-yellow-fill-color-hover);
                --entity-state-stripe-color: var(--ydb-space-light-yellow-stripe-hover);
            }
        }

        &#{$block}_yellow {
            --entity-state-border-color: var(--g-color-text-warning-heavy);
            --ydb-progress-bar-font-color: var(--g-color-text-warning-heavy);
        }

        &#{$block}_spacelightorange {
            --entity-state-background-color: var(--ydb-space-light-orange-bg);
            --entity-state-border-color: var(--ydb-space-light-orange-text);
            --entity-state-fill-color: var(--ydb-space-light-orange-fill-color);
            --ydb-progress-bar-font-color: var(--ydb-space-light-orange-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-light-orange-bg-hover);
                --entity-state-fill-color: var(--ydb-space-light-orange-fill-color-hover);
            }
        }

        &#{$block}_spacepreorange {
            --entity-state-background-color: var(--ydb-space-pre-orange-bg);
            --entity-state-border-color: var(--ydb-space-pre-orange-text);
            --entity-state-fill-color: var(--ydb-space-pre-orange-fill-color);
            --ydb-progress-bar-font-color: var(--ydb-space-pre-orange-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-pre-orange-bg-hover);
                --entity-state-fill-color: var(--ydb-space-pre-orange-fill-color-hover);
            }
        }

        &#{$block}_spaceorange {
            --entity-state-background-color: var(--ydb-space-orange-bg);
            --entity-state-border-color: var(--ydb-space-orange-text);
            --entity-state-fill-color: var(--ydb-space-orange-fill-color);
            --ydb-progress-bar-font-color: var(--ydb-space-orange-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-orange-bg-hover);
                --entity-state-fill-color: var(--ydb-space-orange-fill-color-hover);
            }
        }

        &#{$block}_red {
            --entity-state-border-color: var(--g-color-base-danger-heavy);
            --ydb-progress-bar-font-color: var(--g-color-base-danger-heavy);
        }

        &#{$block}_spaceblack {
            --entity-state-background-color: var(--ydb-space-black-bg);
            --entity-state-border-color: var(--ydb-space-black-border);
            --entity-state-fill-color: var(--ydb-space-black-fill-color);
            --ydb-progress-bar-font-color: var(--ydb-space-black-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-black-bg-hover);
                --entity-state-border-color: var(--ydb-space-black-border-hover);
                --entity-state-fill-color: var(--ydb-space-black-fill-color-hover);
            }
        }

        &#{$block}_light-grey {
            --entity-state-icon-color: var(--ydb-progress-bar-font-color);
        }
    }

    &_mode-frontqueues {
        &:not(#{$block}_solidred):not(#{$block}_darkgrey) {
            --entity-state-stripe-color2: var(--g-color-base-background);
            --entity-state-stripe-border-color: var(--entity-state-border-color);
        }

        &#{$block}_green {
            --entity-state-border-color: var(--g-color-line-positive);
        }

        &#{$block}_yellow {
            --entity-state-border-color: var(--g-color-line-warning);
            --entity-state-icon-color: var(--g-color-text-warning-heavy);
        }

        &#{$block}_red {
            --entity-state-border-color: var(--g-color-line-danger);
        }
    }

    &_mode-compaction,
    &_mode-device {
        --entity-state-background-color: transparent;

        &:not(#{$block}_darkgrey) {
            --entity-state-stripe-color: var(--g-color-base-neutral-light);
            --entity-state-stripe-border-color: var(--entity-state-border-color);

            &#{$block}_highlighted {
                --entity-state-stripe-color: var(--entity-state-background-color);
            }
        }

        &#{$block}_green {
            --entity-state-border-color: var(--g-color-line-positive);
            --entity-state-icon-color: var(--g-color-text-positive);

            --entity-state-background-color: var(--g-color-base-positive-light);
            --entity-state-stripe-color: var(--g-color-base-positive-light);

            &#{$block}_highlighted {
                --entity-state-background-color: var(--g-color-base-positive-light-hover);
                --entity-state-stripe-color: var(--g-color-base-positive-light-hover);
            }
        }

        &#{$block}_yellow {
            --entity-state-border-color: var(--g-color-line-warning);
            --entity-state-icon-color: var(--g-color-text-warning);
        }

        &#{$block}_red {
            --entity-state-border-color: var(--g-color-line-danger);
        }
    }

    // Keep N/D colors independent from expert mode-specific backgrounds.
    &_grey {
        --ydb-progress-bar-font-color: var(--g-color-text-primary);
        --entity-state-font-color: var(--g-color-text-primary);
        --entity-state-icon-color: var(--g-color-text-secondary);
        --entity-state-border-color: none;
        --entity-state-background-color: var(--g-color-base-neutral-medium);
        --entity-state-fill-color: var(--g-color-base-neutral-medium);

        color: var(--g-color-text-primary);
        border: none;

        &#{$block}_highlighted {
            --entity-state-background-color: var(--g-color-base-neutral-medium-hover);
            --entity-state-fill-color: var(--g-color-base-neutral-medium-hover);
        }
    }

    &_compact {
        min-width: 8px;
        height: var(--progress-bar-compact-height);

        border-radius: $outer-compact-border-radius;
        background-color: var(
            --entity-state-compact-background-color,
            var(--entity-state-background-color)
        );

        &#{$block}_filled {
            // Compact disks have no fill-bar element, so reproduce it with a full-size overlay.
            background-image: linear-gradient(
                var(--entity-state-fill-color),
                var(--entity-state-fill-color)
            );
        }
    }

    &_faded {
        background-color: unset;
        background-image: none;
    }

    &_inactive {
        opacity: 0.5;
    }

    &_empty {
        color: var(--g-color-text-hint);
        border-style: dashed;
        background-color: unset;
        background-image: none;
    }

    &_striped {
        overflow: hidden;
        // Inset shadow = border overlay without shrinking the striped fill
        border: none;
        background-color: var(--entity-state-stripe-background-color, transparent);
        background-image: repeating-linear-gradient(
            135deg,
            var(--entity-state-stripe-color, var(--entity-state-background-color)) 0,
            var(--entity-state-stripe-color, var(--entity-state-background-color))
                var(--stripe-width),
            var(--entity-state-stripe-color2, transparent) var(--stripe-width),
            var(--entity-state-stripe-color2, transparent) var(--stripe-step)
        );
        box-shadow: 0 0 0 $border-width
            var(--entity-state-stripe-border-color, var(--entity-state-shadow-color)) inset;

        &:not(#{$block}_red) {
            --entity-state-icon-color: var(--g-color-base-neutral-heavy-hover);
        }

        &#{$block}_solidred {
            --entity-state-stripe-color: var(--g-color-text-dark-hint);
            --entity-state-stripe-color2: transparent;
            --entity-state-icon-color: var(--g-color-text-light-primary);
            background-color: var(--entity-state-background-color);
            box-shadow: none;
        }
    }

    &__fill-bar {
        position: absolute;
        top: 0;
        left: 0;

        height: 100%;

        border-radius: $inner-border-radius 0 0 $inner-border-radius;
        background-color: var(--entity-state-fill-color);

        &_faded {
            // Bg color is light variant, use it to make bar less bright
            background-color: var(--entity-state-background-color);
        }

        &_compact {
            border-radius: $inner-compact-border-radius;
        }

        &_inverted {
            right: 0;
            left: auto;

            border-radius: 0 $inner-border-radius $inner-border-radius 0;
        }
    }

    &__all-mode-indicators {
        --all-mode-indicators-padding: var(--g-spacing-1);

        position: absolute;
        z-index: 2;
        inset: 0;

        display: grid;
        align-items: center;
        grid-template-columns: 16px 12px 17px;
        column-gap: var(--g-spacing-1);

        box-sizing: border-box;
        padding-inline: calc(var(--all-mode-indicators-padding) - $border-width);

        pointer-events: none;

        #{$block}_grey &,
        #{$block}_striped & {
            padding-inline: var(--all-mode-indicators-padding);
        }

        &_size_s {
            --all-mode-indicators-padding: var(--g-spacing-half);

            grid-template-columns: 14px 8px 13px;
            column-gap: var(--g-spacing-half);
        }
    }

    &__pdisk-all-mode-indicators {
        position: absolute;
        z-index: 2;
        inset: 0;

        display: grid;
        justify-content: start;
        align-items: center;
        grid-template-columns: 16px 12px 12px 12px 18px;
        column-gap: var(--g-spacing-1);

        box-sizing: border-box;
        padding-inline: 5px;

        pointer-events: none;

        #{$block}_grey &,
        #{$block}_striped & {
            padding-inline: 6px;
        }
    }

    &__all-mode-capacity-alert-indicator-slot {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        &_size_s {
            font-size: 10px;
            line-height: 12px;
        }
    }

    &__all-mode-missing-data-indicator-icon {
        color: var(--g-color-text-hint);
    }

    &__all-mode-front-queues-indicator-slot {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        color: var(--g-color-text-primary);
    }

    &__all-mode-compaction-indicator-slot {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    &__pdisk-all-mode-capacity-alert-indicator-slot,
    &__pdisk-all-mode-drive-indicator-slot,
    &__pdisk-all-mode-decommit-indicator-slot,
    &__pdisk-all-mode-maintenance-indicator-slot,
    &__pdisk-all-mode-device-indicator-slot {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        min-width: 0;
    }

    &__pdisk-all-mode-device-indicator-slot {
        #{$block}__icon-group {
            margin-left: 0;
        }
    }

    &__title {
        position: relative;
        z-index: 2;

        margin-right: var(--g-spacing-1);

        font-family: var(--g-text-caption-font-family);
        font-size: var(--g-text-caption-1-font-size);
        // bar height minus borders
        line-height: calc(var(--progress-bar-full-height) - #{$border-width * 2});

        color: var(--ydb-progress-bar-font-color);

        &_text,
        &_compact {
            color: var(--g-color-text-primary);
            @include mixins.text-caption-2();
        }

        &_text {
            margin-right: var(--g-spacing-1);
        }

        &_compact {
            overflow: hidden;

            min-width: 0;
            margin-right: auto;
            margin-left: var(--progress-bar-compact-placeholder-margin-left, var(--g-spacing-1));
        }
    }

    &__icon-group {
        position: relative;
        z-index: 2;

        display: inline-flex;
        align-items: center;

        margin-left: calc(var(--g-spacing-1) - $border-width);

        // Icons inside group don't have individual margin-left
        #{$block}__icon {
            margin-left: 0;

            &_overlapped {
                // Second icon overlaps the first by 3px
                margin-left: -3px;
            }
        }
    }

    &__all-mode-compaction-icons_size_s {
        margin-left: 0;
    }

    &__icon {
        position: relative;
        z-index: 2;

        margin-left: calc(var(--g-spacing-1) - $border-width);

        color: var(--entity-state-icon-color, var(--entity-state-border-color));

        &_missing-data {
            color: var(--g-color-text-hint);
        }

        &_overlap-top-left {
            position: absolute;
            z-index: 3;
            top: -6px;
            left: -4px;

            margin-left: 0;
        }
    }

    &__text-label {
        position: relative;
        z-index: 2;

        margin-left: var(--g-spacing-1);

        font-size: var(--g-text-caption-2-font-size);

        color: var(--ydb-progress-bar-font-color, var(--entity-state-border-color));
    }
}