@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/mixins" as mixins;
@use "../utils/_functions" as fn;

$table-sticky-header-height: 300px !default;

.#{iv.$class-prefix}b-table {
    @include cv.register-vars((
        "table-sticky-header-height": #{$table-sticky-header-height}
    ))
}

@mixin table-cards {
    .table {
        background-color: transparent;
    }
    thead {
        tr {
            box-shadow: none;
            border-width: 0;
            th {
                display: none;
            }
            .checkbox-cell {
                display: block;
                width: 100%;
                text-align: right;
                margin-bottom: 1rem;
                border: 0;
            }
        }
    }
    tfoot {
         th {
            border: 0; // Disable is-bordered
            display: inherit;
         }
    }
    tr {
        // Card style — Cannot extend inside media query
        box-shadow: 0 2px 3px cv.getRgbaVar('black', 0.1), 0 0 0 1px cv.getRgbaVar('black', 0.1);
        max-width: 100%;
        position: relative;
        display: block;
        td {
            border: 0; // Disable is-bordered
            display: inherit;
            &:last-child {
                border-bottom: 0;
            }
        }
        &:not(:last-child) {
            margin-bottom: 1rem;
        }
        // Disables is-*
        &:not([class*="is-"]) {
            background: cv.getVar('table-background-color');
            &:hover {
                background-color: cv.getVar('table-background-color');
            }
        }
        &.detail {
            margin-top: -1rem;
        }
    }
    tr:not(.detail):not(.is-empty):not(.table-footer) {
        td {
            display: flex;
            width: auto;
            justify-content: space-between;
            text-align: right;
            border-bottom: 1px solid cv.getVar('background');;
            &:before {
                content: attr(data-label);
                font-weight: cv.getVar('weight-semibold');
                padding-right: 0.5em;
                text-align: left;
            }
        }
    }
}

.table-wrapper {
    .table {
        margin-bottom: 0;
    }
    &:not(:last-child) {
        margin-bottom: 1.5rem;
    }
    @include mixins.touch {
        overflow-x: auto;
    }
}

.b-table {
    transition: opacity cv.getVar('speed') cv.getVar('easing');

    .table-mobile-sort {
        @include mixins.tablet {
            display: none;
        }
    }

    .icon {
        transition: transform cv.getVar('speed-slow') cv.getVar('easing'), opacity  cv.getVar('speed') cv.getVar('easing');
        &.is-desc {
            transform: rotate(180deg);
        }
        &.is-expanded {
            transform: rotate(90deg);
        }
    }

    .sort-icon.icon.is-desc {
        transform: rotate(180deg) translateY(-50%) !important;
    }

    .table {
        width: 100%;
        border: 1px solid transparent;
        border-radius: cv.getVar('radius');
        border-collapse: separate;
        th {
            font-weight: cv.getVar('weight-semibold');
            .th-wrap {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                .icon {
                    margin-left: 0.5rem;
                    margin-right: 0;
                    font-size: 1rem;
                }
                &.is-numeric {
                    flex-direction: row-reverse;
                    text-align: right;
                    width: 95%;
                    .sort-icon {
                        margin-left: 0;
                        margin-right: 0.5rem;
                        left: 0;
                        right: auto;
                    }
                }
                &.is-centered {
                    justify-content: center;
                    text-align: center;
                }
            }
            &.is-current-sort {
                border-color: cv.getVar('grey');
                font-weight: cv.getVar('weight-bold');
            }
            &.is-sortable:hover {
                border-color: cv.getVar('grey')
            }
            &.is-sortable,
            &.is-sortable .th-wrap {
                cursor: pointer;

                .is-relative {
                    position: absolute;
                }
            }
            .sort-icon {
                position: absolute;
                bottom: 50%;
                right: 0;
                transform: translateY(50%);
            }
            .multi-sort-icons {
                display: flex;
                align-items: center;
                .multi-sort-cancel-icon {
                    margin-left: 10px;
                }
            }
            &.is-sticky {
                position: -webkit-sticky;
                position: sticky;
                left: 0;
                z-index: 3 !important;
                background: cv.getVar('table-head-background-color');
            }
        }
        tr {
            &.is-selected {
                .checkbox input {
                    &:checked + .check {
                        background: cv.getVar('table-row-active-color') url(fn.checkmark(cv.getVar('table-row-active-background-color'))) no-repeat center center;
                    }
                    + .check {
                        border-color: cv.getVar('table-row-active-color');
                    }
                }
            }
            &.is-empty:hover {
                background-color: transparent;
            }
        }
        .chevron-cell {
            vertical-align: middle;
            > a {
                color: cv.getVar('input-arrow') !important;
            }
        }
        .checkbox-cell {
            width: 40px;
            .checkbox {
                vertical-align: middle;
                .check {
                    transition: none;
                }
            }
        }
        tr.detail {
            box-shadow: inset 0 1px 3px cv.getVar('grey-lighter');
            background: cv.getVar('scheme-main-bis');
            .detail-container {
                padding: 1rem;
            }
        }
        &:focus {
            border-color: cv.getVar('link');
            box-shadow: 0 0 0 0.125em cv.getRgbaVar('link', 0.25);
        }

        // Modifiers
        &.is-bordered {
            th.is-current-sort,
            th.is-sortable:hover {
                border-color: cv.getVar('grey-lighter');
                background: cv.getVar('background');
            }
        }

        td {
            &.is-sticky {
                position: -webkit-sticky;
                position: sticky;
                left: 0;
                z-index: 1;
                background: cv.getVar('table-background-color');
            }
        }

        &.is-striped {
            tbody {
                tr:not(.is-selected) {
                    &:nth-child(even) {
                        td {
                            &.is-sticky {
                                background: cv.getVar('table-striped-row-even-background-color');
                            }
                        }
                    }
                }
            }
        }
    }

    .level:not(.top) {
        padding-bottom: 1.5rem;
    }

    .table-wrapper {
        position: relative;
        &.has-sticky-header {
            height: cv.getVar('table-sticky-header-height');
            overflow-y: auto;
            &.has-mobile-cards {
                @include mixins.mobile {
                    height: initial !important;
                    overflow-y: initial !important;
                }
            }
            tr:first-child {
                th {
                    position: -webkit-sticky;
                    position: sticky;
                    top: 0;
                    z-index: 2;
                    background: cv.getVar('table-background-color');
                }
            }
        }
        &.has-mobile-cards {
            @include mixins.mobile {
                @include table-cards
            }
        }
        &.is-card-list {
            @include table-cards
        }
    }
}

.touch-dragged-cell {
    position: absolute;
}
.touch-dragged-cell,
.touch-dragged-cell .table {
    pointer-events: none;
    background-color: color-mix(in srgb, cv.getVar('table-background-color') 10%, transparent);
}
.touch-dragged-cell {
    .table {
        width: 100%;
        tr, td {
            background-color: transparent;
        }
    }
}
.touch-dragged-cell.has-mobile-cards .table {
    @include mixins.mobile {
        tr {
            display: block;
            td {
                display: flex;
                justify-content: space-between;
                text-align: right;
                &:before {
                    content: attr(data-label);
                    font-weight: cv.getVar('weight-semibold');
                    padding-right: 0.5em;
                    text-align: left;
                }
            }
        }
    }
}