@use 'sass:map';
@use 'sass:color';
@use '../../style/theming';

// MARK: Variables
$content-navbar-height: theming.$content-navbar-height;

$page-h1-height: 32px;

$header-left-reserved-space: 200px;
$header-left-reserved-space-small-screen: 120px;

// MARK: Mixin
@mixin core() {
  // MARK: Section
  /// @dbx-utility section
  /// @intent rounded section container — exposes --dbx-section-container-shape for shape overrides
  /// @role layout
  .dbx-section {
    border-radius: var(--dbx-section-container-shape, var(--mat-sys-corner-medium));
  }

  // MARK: Header
  .dbx-section-header {
    box-sizing: border-box;

    .dbx-section-header-content {
      h1,
      h2,
      h3,
      h4,
      h5 {
        padding-top: 4px;
        padding-bottom: 1px;
        min-height: var(--dbx-section-header-title-height, #{$page-h1-height});
        display: inline-flex;
        align-items: center;
        margin: 0;
        overflow: hidden;

        > .mat-icon {
          flex-shrink: 0;
          padding-right: var(--dbx-padding-1);
          padding-bottom: var(--dbx-padding-1);
        }
      }

      display: flex;
      align-items: center;

      // The header row is a `.dbx-flex-bar`, so it carries the `--dbx-shadow-gutter`
      // block padding that keeps a raised button's shadow from being clipped. Border-box
      // makes the header's `min-height` / `height` absorb that gutter instead of adding
      // to it, so the 48px row stays 48px (40px button + the gutter) rather than growing
      // to 56px and overflowing a fixed-height section-page header.
      box-sizing: border-box;
    }
  }

  // Regular section header row gets a configurable minimum height so action content
  // (e.g. a dbx-button) in the [sectionHeader] slot has room and is never clipped.
  // Scoped to .dbx-section so dbx-subsection keeps its smaller, title-driven height.
  .dbx-section > .dbx-section-header > .dbx-section-header-content {
    min-height: var(--dbx-section-header-height, 48px);
  }

  .dbx-section-header-strict {
    .dbx-section-header-content {
      h1,
      h2,
      h3,
      h4,
      h5 {
        height: var(--dbx-section-header-title-height, #{$page-h1-height});
      }
    }
  }

  /// @dbx-utility section-header-padded
  /// @intent zero the host padding and add a 4px horizontal inset to the inner `.dbx-section-header` — useful when a parent already provides outer padding
  /// @role spacing
  /// @see-also section
  .dbx-section-header-padded {
    padding: 0 !important;

    > .dbx-section-header {
      padding: 0 4px;
    }
  }

  .dbx-section-hint,
  .dbx-section-hint-inline {
    margin: 0;
    font-size: var(--mat-sys-body-large-size);
  }

  // MARK: Page
  .dbx-section-page.dbx-section-page-root {
    --dbx-content-headers-count: 0;
  }

  .dbx-section-page {
    // Re-point the navbar height locally to the section-page header knob. Because the header
    // height (below) AND the nested content-height math both key off --dbx-content-navbar-height,
    // this keeps header size and reserved content space in sync at any value. Default knob value =
    // the inherited content-navbar height, so default behavior is unchanged.
    // NOTE: descendant .dbx-content-navbar toolbars inside a page also adopt this height when the
    // knob is overridden.
    --dbx-content-navbar-height: var(--dbx-section-page-header-height);

    &.dbx-section-page-full-header {
      > .dbx-section-header > .dbx-section-header-content .dbx-section-header-content-title {
        max-width: 100%;
      }
    }

    // Header
    > .dbx-section-header {
      height: $content-navbar-height;
      max-height: $content-navbar-height;
      overflow: hidden;
      max-width: 100%;

      > .dbx-section-header-content {
        height: $content-navbar-height;
        max-height: $content-navbar-height;
        max-width: 100%;

        // Unlike the regular `.dbx-section` header (which only sets `min-height` and can
        // absorb the gutter), this row is height-LOCKED to the navbar height and its title
        // already fills it. The `.dbx-flex-bar` shadow gutter would eat 8px of that budget
        // and shave the title, so opt this row out. A raised button in a section-PAGE
        // header therefore still clips its shadow — the pre-existing behaviour; use a
        // regular `.dbx-section` header when the action needs elevation.
        #{theming.$shadow-gutter-var}: 0px;

        .dbx-section-header-content-title {
          max-width: calc(80% - var(--dbx-section-page-header-reserved-space, #{$header-left-reserved-space}));
          min-width: 48px;
          flex-shrink: 1;

          display: inline-flex !important;
          justify-content: center;
          align-items: center;

          .mat-icon {
            margin-right: 4px;
          }

          > .title-text {
            @include theming.limit-text();
          }
        }
      }
    }

    // Scroll Config
    .dbx-section-page-content {
      @include theming.nested-content-height(1); // always take up the height
    }

    &.dbx-section-page-scroll-locked {
      overflow: hidden;
    }

    &.dbx-section-page-scroll-body > .dbx-section-page-content {
      overflow-y: auto; // content can scroll on y axis
      overflow-x: hidden;
    }

    .dbx-section-page {
      &.dbx-content-page {
        @include theming.nested-content-height(1);

        .dbx-section-page-content {
          @include theming.nested-content-height(2);
        }

        .dbx-section-page {
          &.dbx-content-page {
            @include theming.nested-content-height(2);

            .dbx-section-page-content {
              @include theming.nested-content-height(3);
            }

            .dbx-section-page {
              &.dbx-content-page {
                @include theming.nested-content-height(3);

                .dbx-section-page-content {
                  @include theming.nested-content-height(4);
                }

                .dbx-section-page {
                  &.dbx-content-page {
                    @include theming.nested-content-height(4);

                    .dbx-section-page-content {
                      @include theming.nested-content-height(5);
                    }

                    .dbx-section-page {
                      &.dbx-content-page {
                        @include theming.nested-content-height(5);

                        .dbx-section-page-content {
                          @include theming.nested-content-height(6);
                        }

                        .dbx-section-page {
                          &.dbx-content-page {
                            @include theming.nested-content-height(6);

                            .dbx-section-page-content {
                              @include theming.nested-content-height(7);
                            }

                            .dbx-section-page {
                              &.dbx-content-page {
                                @include theming.nested-content-height(7);

                                .dbx-section-page-content {
                                  @include theming.nested-content-height(8);
                                }

                                .dbx-section-page {
                                  &.dbx-content-page {
                                    @include theming.nested-content-height(8);

                                    .dbx-section-page-content {
                                      @include theming.nested-content-height(9);
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@mixin responsive($theme-config) {
  // MARK: Page
  .dbx-section-page {
    > .dbx-section-header > .dbx-section-header-content {
      .dbx-section-header-content-title {
        @include theming.if-small-screen($theme-config) {
          max-width: calc(80% - var(--dbx-section-page-header-reserved-space-small-screen, #{$header-left-reserved-space-small-screen}));
        }
      }
    }
  }

  .dbx-section-header.dbx-section-header-full-title > .dbx-section-header-content {
    .dbx-section-header-content-title {
      max-width: 100%;
    }
  }
}

@mixin theme($theme-config) {
  @include responsive($theme-config);
}