@use "sass:list";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$table-color: h.useVar("font-color") !default;
$table-border-width: h.useVar("control-border-width") !default;
$table-border-style: solid !default;
$table-border-color: transparent !default;
$table-border-radius: h.useVar("border-radius") !default;
$table-background-color: h.useVar("control-background-color") !default;

$table-focus-border-color: h.useVar("primary") !default;
$table-focus-box-shadow: vars.$control-focus-box-shadow h.useVar("focus") !default;

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

$table-tr-hover-background-color: h.useVar("grey-lightest") !default;
$table-tr-narrow-padding: calc(0.5 * h.useVar("control-spacer"))
    h.useVar("control-spacer") !default;
$table-tr-striped-background-color: h.useVar("grey-lightest") !default;

$table-tr-selected-background-color: h.useVar("primary") !default;
$table-tr-selected-color: h.useVar("primary-invert") !default;

$table-th-color: h.useVar("font-color") !default;
$table-th-font-size: h.useVar("font-size") !default;
$table-th-font-weight: 600 !default;
$table-th-line-height: h.useVar("line-height") !default;
$table-th-border-width: calc(2 * h.useVar("control-border-width")) !default;
$table-th-border-style: solid !default;
$table-th-border-color: h.useVar("control-border-color") !default;
$table-th-checkbox-width: 40px !default;
$table-th-padding: h.useVar("control-spacer")
    calc(1.5 * h.useVar("control-spacer")) !default;

$table-th-sorted-border-color: h.useVar("grey") !default;
$table-th-sorted-font-weight: 700 !default;
$table-th-sorted-hover-border-color: h.useVar("grey") !default;

$table-td-border-width: h.useVar("control-border-width") !default;
$table-td-border-style: solid !default;
$table-td-border-color: h.useVar("control-border-color") !default;
$table-td-padding: h.useVar("control-spacer")
    calc(1.5 * h.useVar("control-spacer")) !default;

$table-tr-detail-background-color: h.useVar("grey-lightest") !default;
$table-tr-detail-box-shadow: h.useVar("control-box-shadow") !default;
$table-tr-detail-padding: calc(2 * h.useVar("control-spacer")) !default;
$table-td-detail-chevron-color: h.useVar("primary") !default;
$table-td-detail-chevron-width: 40px !default;

$table-tr-empty-padding: h.useVar("control-spacer")
    calc(1.5 * h.useVar("control-spacer")) !default;

$table-pagination-padding: h.useVar("control-spacer") 0 !default;

$table-card-box-shadow:
    0 2px 3px h.useVar("control-shadow-color"),
    0 0 0 1px h.useVar("control-shadow-color") !default;
$table-card-cell-font-weight: 600 !default;
$table-card-cell-padding: 0 0.5em 0 0 !default;
$table-card-cell-text-align: left !default;
$table-card-detail-margin: -1rem 0 0 0;
$table-card-margin: 0 0 1rem 0;
/* @docs */

.o-table {
    &__root {
        @include h.defineVar("table-color", $table-color);

        @include h.defineVar("table-border-color", $table-border-color);
        @include h.defineVar("table-border-style", $table-border-style);
        @include h.defineVar("table-border-width", $table-border-width);
        @include h.defineVar("table-border-radius", $table-border-radius);
        @include h.defineVar("table-background-color", $table-background-color);

        @include h.defineVar("table-sticky-zindex", $table-sticky-zindex);
        @include h.defineVar(
            "table-sticky-header-height",
            $table-sticky-header-height
        );
        @include h.defineVar(
            "table-focus-border-color",
            $table-focus-border-color
        );
        @include h.defineVar("table-focus-box-shadow", $table-focus-box-shadow);

        @include h.defineVar(
            "table-tr-hover-background-color",
            $table-tr-hover-background-color
        );
        @include h.defineVar(
            "table-tr-narrow-padding",
            $table-tr-narrow-padding
        );
        @include h.defineVar(
            "table-tr-striped-background-color",
            $table-tr-striped-background-color
        );

        @include h.defineVar(
            "table-tr-selected-background-color",
            $table-tr-selected-background-color
        );
        @include h.defineVar(
            "table-tr-selected-color",
            $table-tr-selected-color
        );

        @include h.defineVar("table-th-color", $table-th-color);
        @include h.defineVar("table-th-font-size", $table-th-font-size);
        @include h.defineVar("table-th-font-weight", $table-th-font-weight);
        @include h.defineVar("table-th-line-height", $table-th-line-height);
        @include h.defineVar("table-th-border-width", $table-th-border-width);
        @include h.defineVar("table-th-border-style", $table-th-border-style);
        @include h.defineVar("table-th-border-color", $table-th-border-color);
        @include h.defineVar(
            "table-th-checkbox-width",
            $table-th-checkbox-width
        );
        @include h.defineVar("table-th-padding", $table-th-padding);

        @include h.defineVar(
            "table-th-sorted-border-color",
            $table-th-sorted-border-color
        );
        @include h.defineVar(
            "table-th-sorted-font-weight",
            $table-th-sorted-font-weight
        );
        @include h.defineVar(
            "table-th-sorted-hover-border-color",
            $table-th-sorted-hover-border-color
        );

        @include h.defineVar("table-td-border-width", $table-td-border-width);
        @include h.defineVar("table-td-border-style", $table-td-border-style);
        @include h.defineVar("table-td-border-color", $table-td-border-color);
        @include h.defineVar("table-td-padding", $table-td-padding);

        @include h.defineVar(
            "table-tr-detail-background-color",
            $table-tr-detail-background-color
        );
        @include h.defineVar(
            "table-tr-detail-box-shadow",
            $table-tr-detail-box-shadow
        );
        @include h.defineVar(
            "table-tr-detail-padding",
            $table-tr-detail-padding
        );
        @include h.defineVar(
            "table-td-detail-chevron-color",
            $table-td-detail-chevron-color
        );
        @include h.defineVar(
            "table-td-detail-chevron-width",
            $table-td-detail-chevron-width
        );

        @include h.defineVar("table-tr-empty-padding", $table-tr-empty-padding);

        @include h.defineVar(
            "table-pagination-padding",
            $table-pagination-padding
        );

        &--mobile {
            @include h.defineVar(
                "table-card-box-shadow",
                $table-card-box-shadow
            );
            @include h.defineVar(
                "table-card-cell-font-weight",
                $table-card-cell-font-weight
            );
            @include h.defineVar(
                "table-card-cell-padding",
                $table-card-cell-padding
            );
            @include h.defineVar(
                "table-card-cell-text-align",
                $table-card-cell-text-align
            );
            @include h.defineVar(
                "table-card-detail-margin",
                $table-card-detail-margin
            );
            @include h.defineVar("table-card-margin", $table-card-margin);
        }

        position: relative;
    }

    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;

    color: h.useVar("table-color");

    border-width: h.useVar("table-border-width");
    border-style: h.useVar("table-border-style");
    border-color: h.useVar("table-border-color");
    border-radius: h.useVar("table-border-radius");
    background-color: h.useVar("table-background-color");

    &:focus {
        border-color: h.useVar("table-focus-border-color");
        box-shadow: h.useVar("table-focus-box-shadow");
    }

    &--bordered {
        td,
        th {
            border-width: h.useVar("table-td-border-width");
            border-style: h.useVar("table-td-border-style");
            border-color: h.useVar("table-td-border-color");
        }
    }

    &--striped {
        tr:nth-child(2n) {
            background-color: h.useVar("table-tr-striped-background-color");
        }
    }

    &--narrowed {
        td,
        th {
            padding: h.useVar("table-tr-narrow-padding");
        }
    }

    &--hoverable {
        tr:not(.o-table__tr--selected):hover {
            background-color: h.useVar("table-tr-hover-background-color");
        }
    }

    &__mobile-sort {
        display: none;
    }

    &__wrapper {
        transition: opacity h.useVar("animation-speed")
            h.useVar("transition-timing");
        position: relative;

        &--sticky-header {
            height: h.useVar("table-sticky-header-height");
            overflow-y: auto;

            .o-table__th {
                position: -webkit-sticky;
                position: sticky;
                top: 0;
                background: h.useVar("table-background-color");

                &:not(.o-table__th--sticky) {
                    z-index: calc(h.useVar("table-sticky-zindex") + 1);
                }
            }
        }

        &--scrollable {
            -webkit-overflow-scrolling: touch;
            overflow-x: auto;
            max-width: 100%;
        }

        &--mobile {
            overflow-x: auto;

            .o-table__mobile-sort {
                display: block;
            }

            // cards
            .o-table {
                background-color: transparent;
            }

            thead {
                tr {
                    box-shadow: none;
                    border-width: 0;

                    th {
                        display: none;
                    }

                    .o-table-th-checkbox {
                        display: block;
                        width: 100%;
                        text-align: right;
                        border: 0;
                    }
                }
            }

            tfoot {
                th {
                    border: 0;
                    display: inherit;
                }
            }

            tr {
                box-shadow: h.useVar("table-card-box-shadow");
                max-width: 100%;
                position: relative;
                display: block;

                td {
                    border: 0;
                    display: inherit;

                    &:last-child {
                        border-bottom: 0;
                    }
                }

                &:not(:last-child) {
                    margin: h.useVar("table-card-margin");
                }

                &:not(.o-table__tr--selected) {
                    background: h.useVar("table-background-color");
                }

                &.o-table__tr-detail {
                    margin: h.useVar("table-card-detail-margin");
                }
            }

            tr:not(.o-table--detailed):not(.o-table--empty):not(
                    .o-table__footer
                ) {
                td {
                    display: flex;
                    width: auto;
                    justify-content: space-between;
                    text-align: right;
                    border-bottom-color: h.useVar("table-background");

                    &:before {
                        content: attr(data-label);
                        font-weight: h.useVar("table-card-cell-font-weight");
                        padding-right: h.useVar("table-card-cell-padding");
                        text-align: h.useVar("table-card-cell-text-align");
                    }
                }
            }
        }
    }

    &__tr {
        &-empty > td {
            text-align: center;
            padding: h.useVar("table-tr-empty-padding");
        }

        &-detail {
            box-shadow: h.useVar("table-tr-detail-box-shadow");
            background-color: h.useVar("table-tr-detail-background-color");

            & > td {
                padding: h.useVar("table-tr-detail-padding");
            }
        }

        &--selected {
            background-color: h.useVar("table-tr-selected-background-color");
            color: h.useVar("table-tr-selected-color");

            // color variants
            @each $name, $pair in vars.$colors {
                &-#{$name} {
                    @include h.defineVar(
                        "table-tr-selected-background-color",
                        h.useVar($name)
                    );
                    @include h.defineVar(
                        "table-tr-selected-color",
                        h.useVar("#{$name}-invert")
                    );
                }
            }
        }
    }

    &__th {
        vertical-align: top;
        text-align: left;
        position: relative;

        color: h.useVar("table-th-color");
        font-size: h.useVar("table-th-font-size");
        font-weight: h.useVar("table-th-font-weight");
        line-height: h.useVar("table-th-line-height");

        border-bottom-width: h.useVar("table-th-border-width");
        border-bottom-style: h.useVar("table-th-border-style");
        border-bottom-color: h.useVar("table-th-border-color");

        padding: h.useVar("table-th-padding");

        &--centered {
            text-align: center;
        }

        &--right {
            text-align: right;
        }

        &__sort-icon {
            position: absolute;
            right: 0;
        }

        &-checkbox {
            width: h.useVar("table-th-checkbox-width");
        }

        &-sorted,
        &--sorted {
            border-color: h.useVar("table-th-sorted-border-color");
            font-weight: h.useVar("table-th-sorted-font-weight");
        }

        &--sortable {
            // add clickable cursor
            @include h.clickable;

            &:hover {
                border-color: h.useVar("table-th-sorted-hover-border-color");
            }
        }

        &--sticky {
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            z-index: calc(h.useVar("table-sticky-zindex") + 2);
            background-color: h.useVar("table-background-color");
        }

        &-detailed {
            width: h.useVar("table-td-detail-chevron-width");
        }
    }

    &__td {
        vertical-align: top;
        text-align: left;
        border-bottom-width: h.useVar("table-td-border-width");
        border-bottom-style: h.useVar("table-td-border-style");
        border-bottom-color: h.useVar("table-td-border-color");
        padding: h.useVar("table-td-padding");

        &--sticky {
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            z-index: h.useVar("table-sticky-zindex");
            background-color: h.useVar("table-background-color");
        }

        &--right {
            text-align: right;
        }

        &--centered {
            text-align: center;
        }

        &-chevron {
            vertical-align: middle;
            width: h.useVar("table-td-detail-chevron-width");
            color: h.useVar("table-td-detail-chevron-color");
        }
    }

    &__pagination {
        align-items: center;
        justify-content: space-between;
        display: flex;
        padding: h.useVar("table-pagination-padding");

        // left - right
        > div {
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 0;
        }

        // left
        > div:first-child {
            align-items: center;
            justify-content: flex-start;
        }

        // right
        > div:last-child {
            align-items: center;
            justify-content: flex-end;

            > div {
                align-items: center;
                display: flex;
                flex-basis: auto;
                flex-grow: 0;
                flex-shrink: 0;
                justify-content: center;
            }
        }
    }
}