// redo with high level variables
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@ag-grid-community/styles' as ag;

@mixin msk-ag-grid-base {
    @include ag.grid-styles(
        (
            theme: msk,
            --ag-background-color: c.$msk--white-0,
            --ag-balham-active-color: c.$msk--blue-50,
            --ag-borders: 1px solid,
            --ag-border-color: c.$msk--cool-gray-30,
            --ag-border-radius: 8px,
            --ag-borders-input: 1px solid,
            --ag-borders-row: solid 0,
            --ag-card-shadow: v.$msk--elevation-plus-06,
            --ag-cell-widget-spacing: 8px,
            --ag-checkbox-border-radius: 2px,
            --ag-checkbox-background-color: c.$msk--white-0,
            --ag-checkbox-checked-color: c.$msk--blue-80,
            --ag-checkbox-unchecked-color: c.$msk--blue-80,
            --ag-checkbox-indeterminate-color: c.$msk--cool-gray-60,
            --ag-control-panel-background-color: c.$msk--white-0,
            --ag-cell-horizontal-border: solid transparent,
            --ag-data-color: c.$msk--warm-gray-100,
            --ag-foreground-color: c.$msk--cool-gray-70,
            --ag-header-background-color: c.$msk--white-0,
            --ag-header-foreground-color: c.$msk--cool-gray-70,
            --ag-icon-size: v.$msk--size-1,
            --ag-icon-font-family: 'agGridMaterial',
            --ag-input-border-color: c.$msk--cool-gray-100,
            --ag-input-focus-border-color: c.$msk--black-100,
            --ag-input-focus-box-shadow: inset 0 0 0 1px
                var(--ag-input-focus-border-color),
            --ag-list-item-height: 30px,
            --ag-odd-row-background-color: c.$msk--cool-gray-10,
            --ag-popup-shadow: v.$msk--elevation-plus-06,
            --ag-range-selection-border-color: c.$msk--black-100,
            --ag-range-selection-highlight-color: c.$msk--blue-30,
            --ag-row-hover-color: c.$msk--blue-10,
            --ag-selected-row-background-color: c.$msk--blue-20,
            --ag-selected-tab-underline-color: c.$msk--cool-gray-70,
            --ag-selected-tab-underline-width: 3px,
            --ag-selected-tab-underline-transition-speed: 250ms,
            --ag-toggle-button-switch-background-color: c.$msk--white-0,
            --ag-widget-container-horizontal-padding: 8px,
            --ag-widget-container-vertical-padding: 8px,
            --ag-widget-horizontal-spacing: 8px,
            --ag-widget-vertical-spacing: 8px,
        )
    );
}

@mixin msk-ag-grid-theme-alpine {
    .ag-theme-alpine {
        --ag-grid-size: 10px;
        --ag-font-size: #{v.$msk--size-2};

        .ag-cell,
        .ag-header-cell-label,
        .ag-popup,
        .ag-side-bar {
            font-family: v.$msk--global-font-family;
            font-weight: 300;
        }

        .ag-header-cell-text {
            font-weight: 500;
        }

        .ag-floating-filter {
            .ag-input-field-input,
            .ag-text-field-input {
                height: m.msk-rem(40px);
            }
        }

        .ag-floating-filter-button-button {
            height: m.msk-rem(48px);
            width: m.msk-rem(48px);
        }

        .msk-ag-filter-wrapper {
            .#{$prefix}--label {
                font-family: v.$msk--global-font-family;
            }
        }
    }
}

@mixin msk-ag-grid-theme-balham {
    .ag-theme-balham {
        --ag-grid-size: 6px;
        --ag-font-size: #{v.$msk--size-1};

        .ag-cell,
        .ag-header-cell-label,
        .ag-popup,
        .ag-side-bar {
            font-family: v.$msk--font-family-source-sans;
        }

        .ag-header-cell-text {
            font-weight: 600;
        }

        .ag-floating-filter-button-button {
            height: m.msk-rem(24px);
            width: m.msk-rem(24px);
        }

        .msk-ag-filter-wrapper {
            .#{$prefix}--label {
                font-family: v.$msk--font-family-source-sans;
            }
        }
    }
}

@mixin msk-ag-grid-theme-msk {
    $msk--ag-msk-input-paddings: #{m.msk-rem(2px)} #{m.msk-rem(8px)} #{m.msk-rem(
            2px
        )} #{m.msk-rem(8px)};

    // Applies to both HPC and CLP
    .ag-theme-msk {
        .ag-root-wrapper {
            border-radius: #{m.msk-rem(2px)};
        }

        // header
        .ag-header {
            // header control - sort and filter
            .ag-header-cell-menu-button {
                &:not(.ag-header-menu-always-show) {
                    opacity: 1;
                }
            }

            .ag-header-cell {
                &.ag-header-active {
                    box-shadow: var(--ag-input-focus-box-shadow);
                }
            }
        }

        // input in default style
        // will be customized depending on theme, components etc
        .ag-input-field-input,
        .ag-text-field-input {
            border-radius: #{m.msk-rem(4px)};
            padding-left: #{m.msk-rem(8px)};
        }

        // floating filter
        .ag-floating-filter {
            .ag-floating-filter-button-button {
                height: #{m.msk-rem(24px)};
                width: #{m.msk-rem(24px)};

                .ag-icon-filter {
                    position: relative;

                    &::before {
                        left: 50%;
                        position: absolute;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }

            .ag-input-field-input,
            .ag-text-field-input {
                padding: $msk--ag-msk-input-paddings;
            }
        }

        .ag-cell {
            align-items: center;
            display: inline-flex;
        }

        // sidebar button width (columns, filters etc)
        .ag-side-buttons {
            width: #{m.msk-rem(24px)};
        }

        .ag-cell-focus {
            background-color: c.$msk--blue-30;
            box-shadow: var(--ag-input-focus-box-shadow);
            color: c.$msk--black-100;
        }

        // select dropdown
        .ag-picker-field-wrapper {
            padding-right: #{m.msk-rem(8px)};
        }

        // filter card from column header and floating filter
        .ag-filter,
        .ag-menu {
            border-color: transparent;

            .ag-tabs-header {
                height: #{m.msk-rem(30px)};
            }

            .ag-tab {
                flex: 1;
            }

            // radio buttons AND / OR
            .ag-filter-condition {
                align-items: center;
                height: #{m.msk-rem(26px)};
            }

            .ag-input-field-input,
            .ag-text-field-input {
                padding: $msk--ag-msk-input-paddings;
            }

            // apply button can be any numbers - apply, reset, cancel, clear or no button
            .ag-filter-apply-panel {
                column-gap: calc(
                    var(--ag-grid-size) * 2
                ); // apply gap. remove margin from buttons
                button {
                    background-color: c.$msk--white-0;
                    border: 2px solid c.$msk--blue-70;
                    border-radius: #{m.msk-rem(4px)};
                    box-shadow: v.$msk--elevation-plus-01;
                    color: c.$msk--blue-70;
                    flex: 1;
                    font-size: v.$msk--size-1;
                    font-weight: 600;
                    line-height: 1.5;
                    margin: 0; // override default. column-gap is applied in parent element
                    padding-inline: #{m.msk-rem(8px)};
                }
            }
        }
    }
}