@use "../anna-common-scss/fonts" as *;
@use "../anna-common-scss/colors" as *;
@use "sass:list";
@use "sass:map";

@mixin sticky-left($leftOffset, $zIndex) {
    position: sticky !important;
    left: $leftOffset;
    z-index: $zIndex !important;
}

@mixin ellipsify() {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@mixin table-container-scroll-bar($margin-left: 0, $margin-top: 0) {
    .table-container {
        &::-webkit-scrollbar-track {
            margin-top: $margin-top;
            margin-left: $margin-left;
        }
    }
}

@mixin table-fixed-style($width: 100%) {
    table {
        margin-bottom: 0;
        table-layout: fixed;
        width: $width;
    }
}

@mixin table-header-style($bg-color) {
    background: $bg-color;
    padding: 2px 8px;
    line-height: normal;
    position: sticky;
    position: -webkit-sticky;
    top: 0;

    .upper-label {
        @include fonts(Roboto, var(--table-header-fs), normal, 700, normal, normal, 0.3px);
        color: $charcoal;
        margin-bottom: 0;
    }

    .lower-label {
        @include fonts(Roboto, var(--table-header-fs), normal, 700, normal, normal, 0.3px);
        color: $darkGray;
        margin-bottom: 0;
    }

    div.row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        width: max-content;
    }

    div.dummy-header {
        justify-content: center;
        margin-left: 50% !important;
        margin-right: 50% !important;
        width: -webkit-fill-available;
    }

    div.sort-filter-container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-left: $fs-4;
        margin-right: auto;
    }

    span.mdi-filter-variant {
        font-size: 13px !important;
        top: -1px !important;
        position: relative;
    }
}

@function get-box-shadow-for-first-header($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color,
            inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    } @else {
        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color,
            inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    }
}

@function get-box-shadow-for-last-header($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset -1px 0 0 0 $left-right-box-shadow-color, inset 1px 0 0 0 $left-right-box-shadow-color,
            inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    } @else {
        @return inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color,
            inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    }
}

@function get-box-shadow-for-middle-header($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color,
            inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    } @else {
        @return inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    }
}

@mixin table-header($sticky-left-map, $box-shadow-map, $bg-color: #ededed) {
    $last-sticky-col: 0;
    @if (list.length(map.keys($sticky-left-map)) > 0) {
        $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
    }

    .scroll-left-shadow-effect .header-row th:nth-of-type(#{$last-sticky-col}) {
        border: none !important;
        filter: drop-shadow(2px 0 0px $lightGray-4);
    }

    .header-row {
        background: $bg-color;

        th {
            box-shadow: none !important;
            cursor: default;
            @include table-header-style($bg-color);
        }

        $box-shadow-start-index: map.get($box-shadow-map, "start-index");
        $box-shadow-end-index: map.get($box-shadow-map, "end-index");

        @for $i from $box-shadow-start-index through $box-shadow-end-index {
            @if ($i == $box-shadow-start-index) {
                th:nth-of-type(#{$i}) {
                    box-shadow: get-box-shadow-for-first-header($box-shadow-map) !important;
                }
            } @else if($i == $box-shadow-end-index) {
                th:nth-of-type(#{$i}) {
                    box-shadow: get-box-shadow-for-last-header($box-shadow-map) !important;
                }
            } @else {
                th:nth-of-type(#{$i}) {
                    box-shadow: get-box-shadow-for-middle-header($box-shadow-map) !important;
                }
            }
        }

        @each $columnNumber, $sticky-prop in $sticky-left-map {
            $left-offset: map.get($sticky-prop, "left");
            $z-index: map.get($sticky-prop, "z-index");

            th:nth-of-type(#{$columnNumber}) {
                @include sticky-left($left-offset, $z-index);
            }
        }
    }
}

@mixin total-row-common-styling($bg-color) {
    padding: 2px 8px;
    background: $bg-color;
    position: sticky;
    position: -webkit-sticky;

    .upper-label {
        @include fonts(Roboto, var(--table-body-fs), normal, 700, normal, normal, 0.3px);
        color: $charcoal;
    }

    .lower-label {
        @include fonts(Roboto, var(--table-body-fs), normal, 700, normal, normal, 0.3px);
        color: $darkGray;
        margin-top: -3px;
    }

    br {
        display: block;
        content: "";
        margin-top: -6px;
    }
}

@function get-box-shadow-for-first-total-row($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
    $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
    $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
    $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset 1px 0 0 0 $top-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color,
            inset 0 -1px 0 0 $bottom-box-shadow-color;
    } @else {
        @return inset 1px 0 0 0 $top-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color,
            inset 0 -1px 0 0 $bottom-box-shadow-color;
    }
}

@function get-box-shadow-for-last-total-row($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
    $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
    $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
    $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset -1px 0 0 0 $top-box-shadow-color, inset 1px 0 0 0 $left-box-shadow-color,
            inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color;
    } @else {
        @return inset -1px 0 0 0 $top-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color,
            inset 0 -1px 0 0 $bottom-box-shadow-color;
    }
}

@function get-box-shadow-for-middle-total-row($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
    $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
    $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
    $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset 1px 0 0 0 $left-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color,
            inset 0 -1px 0 0 $bottom-box-shadow-color;
    } @else {
        @return inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color;
    }
}

@mixin total-row($sticky-top-left-map, $box-shadow-map, $bg-color: white) {
    $sticky-top: map.get($sticky-top-left-map, "top");
    $sticky-left-map: map.get($sticky-top-left-map, "sticky-left");
    $last-sticky-col: 0;

    @if (list.length(map.keys($sticky-left-map)) > 0) {
        $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
    }

    .scroll-left-shadow-effect:not(.no-data-table) .total-row td:nth-of-type(#{$last-sticky-col}) {
        filter: drop-shadow(2px 0 2px $lightGray-4);
    }

    .total-row {
        td {
            top: $sticky-top !important;
            @include total-row-common-styling($bg-color);
        }

        $box-shadow-start-index: map.get($box-shadow-map, "start-index");
        $box-shadow-end-index: map.get($box-shadow-map, "end-index");

        @for $i from $box-shadow-start-index through $box-shadow-end-index {
            @if ($i == $box-shadow-start-index) {
                td:nth-of-type(#{$i}) {
                    box-shadow: get-box-shadow-for-first-total-row($box-shadow-map) !important;
                }
            } @else if($i == $box-shadow-end-index) {
                td:nth-of-type(#{$i}) {
                    box-shadow: get-box-shadow-for-last-total-row($box-shadow-map) !important;
                }
            } @else {
                td:nth-of-type(#{$i}) {
                    box-shadow: get-box-shadow-for-middle-total-row($box-shadow-map) !important;
                }
            }
        }

        @each $columnNumber, $sticky-prop in $sticky-left-map {
            $left-offset: map.get($sticky-prop, "left");
            $z-index: map.get($sticky-prop, "z-index");

            td:nth-of-type(#{$columnNumber}) {
                @include sticky-left($left-offset, $z-index);
            }
        }
    }
}

@mixin table-data-common-styling($bg-color: white) {
    div:nth-child(1) {
        color: #000;
        @include ellipsify();
        @include fonts(Roboto, var(--table-body-fs), normal, 400, normal, normal, 0px);
    }

    div:nth-child(2) {
        color: #a7a7a7;
        @include ellipsify();
        @include fonts(Roboto, var(--table-body-fs), normal, 400, normal, normal, 0px);
    }
}

@function get-box-shadow-for-first-table-data($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    } @else {
        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    }
}

@function get-box-shadow-for-last-table-data($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color,
            inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    } @else {
        @return inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    }
}

@function get-box-shadow-for-middle-table-data($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    } @else {
        @return inset 0 -1px 0 0 $top-bottom-box-shadow-color;
    }
}

@mixin table-data($sticky-left-map, $box-shadow-map, $bg-color: white) {
    td {
        cursor: pointer;
        background: $bg-color;
        box-shadow: none !important;

        @include table-data-common-styling($bg-color);
    }

    $box-shadow-start-index: map.get($box-shadow-map, "start-index");
    $box-shadow-end-index: map.get($box-shadow-map, "end-index");

    @for $i from $box-shadow-start-index through $box-shadow-end-index {
        @if ($i == $box-shadow-start-index) {
            td:nth-of-type(#{$i}) {
                box-shadow: get-box-shadow-for-first-table-data($box-shadow-map) !important;
            }
        } @else if($i == $box-shadow-end-index) {
            td:nth-of-type(#{$i}) {
                box-shadow: get-box-shadow-for-last-table-data($box-shadow-map) !important;
            }
        } @else {
            td:nth-of-type(#{$i}) {
                box-shadow: get-box-shadow-for-middle-table-data($box-shadow-map) !important;
            }
        }
    }

    $map-length: list.length($sticky-left-map);
    $last-column-index: if($map-length > 0, nth(map-keys($sticky-left-map), $map-length), null);

    @each $columnNumber, $sticky-prop in $sticky-left-map {
        $left-offset: map.get($sticky-prop, "left");
        $z-index: map.get($sticky-prop, "z-index");

        td:nth-of-type(#{$columnNumber}) {
            @include sticky-left($left-offset, $z-index);
        }
    }

    // @if ($last-column-index != null) {
    //     td:nth-child(n + #{$last-column-index}),
    //     th:nth-child(n + #{$last-column-index}) {
    //         position: relative;
    //         top: -1px !important;
    //         // background-color: lightblue !important; /* Apply styles from non-sticky column to last column **/
    //     }
    // }
}

@mixin table-data-shadow($columnNumber) {
    .scroll-left-shadow-effect:not(.no-data-table) td:nth-of-type(#{$columnNumber}) {
        filter: drop-shadow(2px 0 1px $lightGray-4);
    }
}

@mixin no-data-table($table-container-height, $box-shadow-map, $row-height-map: ()) {
    .table-container.no-data-table > div {
        height: $table-container-height !important;
        tr td {
            filter: none !important;
        }
    }

    $box-shadow-start-index: map.get($box-shadow-map, "box-shadow-start-index");
    $box-shadow-end-index: map.get($box-shadow-map, "box-shadow-end-index");
    $box-shadow-color: map.get($box-shadow-map, "box-shadow-color");

    tbody {
        @if (map.has-key($row-height-map, "row-height")) {
            tr.no-border-tr {
                height: map.get($row-height-map, "row-height") !important;
            }
        }

        tr.no-border-tr:first-of-type {
            @for $i from $box-shadow-start-index through $box-shadow-end-index {
                td:nth-of-type(#{$i}) {
                    @if ($i == $box-shadow-start-index) {
                        box-shadow: inset 1px 0 0 0 $box-shadow-color !important;
                    } @else if($i == $box-shadow-end-index) {
                        box-shadow: inset -1px 0 0 0 $box-shadow-color !important;
                    } @else {
                        box-shadow: none !important;
                    }
                }
            }
        }

        tr.no-border-tr:last-of-type {
            @for $i from $box-shadow-start-index through $box-shadow-end-index {
                td:nth-of-type(#{$i}) {
                    @if ($i == $box-shadow-start-index) {
                        box-shadow: inset 1px -1px 0 0 $box-shadow-color !important;
                    } @else if($i == $box-shadow-end-index) {
                        box-shadow: inset -1px -1px 0 0 $box-shadow-color !important;
                    } @else {
                        box-shadow: inset 0 -1px 0 0 $box-shadow-color !important;
                    }
                }
            }
        }
    }
}

@function get-box-shadow-for-bottom-border-first-row($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset 1px 0 0 0 $left-right-box-shadow-color;
    } @else {
        @return inset 1px 0 0 0 $left-right-box-shadow-color;
    }
}

@function get-box-shadow-for-bottom-border-last-row($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color;
    } @else {
        @return inset -1px 0 0 0 $left-right-box-shadow-color;
    }
}

@function get-box-shadow-for-bottom-border-middle-row($box-shadow-map) {
    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");

    @if ($show-right-border-box-shadow) {
        @return inset 1px 0 0 0 $top-bottom-box-shadow-color;
    } @else {
        @return none;
    }
}

@mixin table-bottom-border($box-shadow-map) {
    $box-shadow-start-index: map.get($box-shadow-map, "start-index");
    $box-shadow-end-index: map.get($box-shadow-map, "end-index");
    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");

    .bottom-border {
        border-bottom: 1px solid $top-bottom-box-shadow-color;
    }

    .bottom-border tbody {
        tr:last-of-type {
            @for $i from $box-shadow-start-index through $box-shadow-end-index {
                @if ($i == $box-shadow-start-index) {
                    td:nth-of-type(#{$i}) {
                        box-shadow: get-box-shadow-for-bottom-border-first-row($box-shadow-map) !important;
                    }
                } @else if($i == $box-shadow-end-index) {
                    td:nth-of-type(#{$i}) {
                        box-shadow: get-box-shadow-for-bottom-border-last-row($box-shadow-map) !important;
                    }
                } @else {
                    td:nth-of-type(#{$i}) {
                        box-shadow: get-box-shadow-for-bottom-border-middle-row($box-shadow-map) !important;
                    }
                }
            }
        }
    }
}

$default-box-shadow-map: (
    "show-right-border-box-shadow": true,
    "top-bottom-bs-color": #d4d4d4,
    "left-right-bs-color": #d4d4d4,
);

@mixin default-table-header-without-sticky-map($box-shadow-map: $default-box-shadow-map, $bg-color: #ededed) {
    th {
        border: none;
        @include table-header-style($bg-color);
        box-shadow: get-box-shadow-for-middle-header($box-shadow-map);
    }

    th:first-of-type {
        box-shadow: get-box-shadow-for-first-header($box-shadow-map);
    }

    th:last-of-type {
        box-shadow: get-box-shadow-for-last-header($box-shadow-map);
    }
}

$default-box-shadow-map-for-table-data: (
    "show-right-border-box-shadow": true,
    "top-bottom-bs-color": #d4d4d4,
    "left-right-bs-color": #d4d4d4,
);

@mixin default-table-body-without-sticky-map(
    $box-shadow-map: $default-box-shadow-map-for-table-data,
    $bg-color: white
) {
    td {
        padding: 2px 8px;
        border: none;
        @include table-data-common-styling($bg-color);
        box-shadow: get-box-shadow-for-middle-table-data($box-shadow-map);
    }

    td:first-of-type {
        box-shadow: get-box-shadow-for-first-table-data($box-shadow-map);
    }

    td:last-of-type {
        box-shadow: get-box-shadow-for-last-table-data($box-shadow-map);
    }
}

$default-box-shadow-map-for-bottom-border: (
    "show-right-border-box-shadow": true,
    "top-bottom-bs-color": #d4d4d4,
    "left-right-bs-color": #d4d4d4,
);

@mixin default-bottom-border($box-shadow-map: $default-box-shadow-map-for-bottom-border) {
    tr:last-of-type {
        td {
            box-shadow: get-box-shadow-for-bottom-border-middle-row($box-shadow-map);
        }

        td:first-of-type {
            box-shadow: get-box-shadow-for-bottom-border-first-row($box-shadow-map);
        }

        td:last-of-type {
            box-shadow: get-box-shadow-for-bottom-border-last-row($box-shadow-map);
        }
    }
}