@use '../../style/theming';
@use './style/angular-calendar' as calendar;

// MARK: Variables
$calendar-header-height: theming.$content-navbar-height;
$calendar-title-height: 22px;
$calendar-week-content-header-height: 51px;
$calendar-month-content-header-height: 29px;
$calendar-scrollable-content-bottom-padding: 12px;
$calendar-week-content-all-day-events-height: 110px;

$calendar-title-and-header-height: calc($calendar-header-height + $calendar-title-height);
$calendar-content-border-consideration: 2px;

// MARK: Mixin
@mixin core() {
  @include calendar.cal-core();
  @include calendar.cal-theme(());

  .dbx-calendar.dbx-calendar-fixed-header-size .dbx-calendar-header {
    height: $calendar-header-height;
    padding: 0px 8px;
  }

  .dbx-calendar {
    height: 100%;

    .dbx-calendar-title {
      height: $calendar-title-height;
      font-weight: bold;
      text-align: center;
      margin: 0;
      padding: 0;
    }

    .dbx-calendar-header {
      display: flex;
      width: 100%;
      align-items: center;
      box-sizing: border-box;

      .dbx-calendar-controls {
        width: 100%;
      }

      .dbx-calendar-controls-compact {
        height: unset;
        justify-content: center;
        align-items: center;
      }
    }

    .dbx-calendar-controls-right {
      display: inline-flex;
      align-items: flex-end;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .dbx-calendar-content {
      height: 100%;

      &.dbx-calendar-content-week {
        height: calc(100% - $calendar-title-and-header-height - $calendar-week-content-header-height - $calendar-content-border-consideration);
        margin-top: $calendar-week-content-header-height;
      }

      &.dbx-calendar-content-month {
        height: calc(100% - $calendar-title-and-header-height - $calendar-month-content-header-height - $calendar-content-border-consideration);
        margin-top: $calendar-month-content-header-height;
      }

      &.dbx-calendar-content-day .cal-week-view {
        height: calc(100% - $calendar-title-and-header-height - $calendar-content-border-consideration);
        overflow: auto;
      }
    }

    .cal-month-view {
      position: relative;
      width: 100%;
      height: 100%;

      .cal-header {
        margin-top: -$calendar-month-content-header-height;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        box-sizing: border-box;
      }

      .cal-days {
        overflow: auto;
        height: 100%;
      }
    }

    // Applies to both the day and week view.
    .cal-week-view {
      position: relative;
      height: 100%;
      width: 100%;

      .cal-time-events {
        .cal-day-column {
          height: 1440px; // 1440 is the combined height of all the content.
        }
      }
    }

    .dbx-calendar-content-week {
      .cal-week-view {
        .cal-all-day-events {
          // Day events set to specific height.
          height: $calendar-week-content-all-day-events-height;
        }

        .cal-day-headers {
          margin-top: -$calendar-week-content-header-height;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          box-sizing: border-box;
        }

        .cal-time-events {
          // Weirdness caused by our hack for using the cal-day-headers as an absolute position.
          overflow: auto;
          padding-bottom: $calendar-scrollable-content-bottom-padding;
          height: 100%;
          box-sizing: border-box;
        }
      }
    }

    .cal-day-view,
    .cal-week-view {
      .cal-event {
        min-height: 25px;
      }
    }

    .cal-day-number {
      user-select: none; // Do not allow selecting/highlighting text accidentally
    }

    // Calendar color tokens (theme-aware via --mat-sys-* / --dbx-* CSS variables)
    //
    // Tone-based colors resolve from a public `--dbx-calendar-<name>-color` (hue)
    // + `--dbx-calendar-<name>-tone` (opacity level) pair so consumers can re-tint or
    // soften a state independently without redefining the full color-mix() expression.
    #{calendar.$cal-event-icon-color-var}: var(--dbx-primary-color);
    #{calendar.$cal-event-color-primary-var}: var(--mat-sys-on-primary-container);
    #{calendar.$cal-event-color-secondary-var}: var(--mat-sys-primary-container);
    // Defaults to the shared divider at full strength so calendar cell borders match
    // dbx-table-view / dbx-two-column. --dbx-divider-color is already semi-transparent, so
    // applying an extra tone here would double-fade it; lower --dbx-calendar-border-tone
    // (or this whole calendar's --dbx-divider-color) to soften the dense grid if desired.
    #{calendar.$cal-border-color-var}: color-mix(in srgb, var(--dbx-calendar-border-color, var(--dbx-divider-color)) var(--dbx-calendar-border-tone, 100%), transparent);
    #{calendar.$cal-bg-primary-var}: var(--mat-sys-background);
    #{calendar.$cal-bg-secondary-var}: color-mix(in srgb, var(--dbx-calendar-secondary-color, var(--mat-sys-on-surface)) var(--dbx-calendar-secondary-tone, 4%), transparent);
    #{calendar.$cal-bg-hover-var}: color-mix(in srgb, var(--dbx-calendar-hover-color, var(--mat-sys-on-surface)) var(--dbx-calendar-hover-tone, 4%), transparent);
    #{calendar.$cal-bg-active-var}: color-mix(in srgb, var(--dbx-calendar-active-day-color, var(--dbx-primary-color)) var(--dbx-calendar-active-day-tone, 30%), transparent);
    #{calendar.$cal-bg-selected-var}: color-mix(in srgb, var(--dbx-calendar-selected-day-color, var(--dbx-primary-color)) var(--dbx-calendar-selected-day-tone, 60%), transparent);
    #{calendar.$cal-bg-disabled-var}: var(--mat-sys-surface);
    #{calendar.$cal-bg-not-applicable-var}: var(--mat-sys-surface);
    #{calendar.$cal-bg-highlight-var}: color-mix(in srgb, var(--dbx-calendar-highlight-color, var(--dbx-accent-color)) var(--dbx-calendar-highlight-tone, 30%), transparent);
    #{calendar.$cal-today-bg-var}: color-mix(in srgb, var(--dbx-calendar-today-color, var(--mat-sys-on-surface)) var(--dbx-calendar-today-tone, 4%), transparent);
    #{calendar.$cal-weekend-color-var}: var(--mat-sys-on-surface);
    #{calendar.$cal-badge-color-var}: var(--dbx-accent-color);
    #{calendar.$cal-selected-var}: var(--mat-sys-on-primary);
    #{calendar.$cal-disabled-var}: var(--dbx-warn-color);
    #{calendar.$cal-not-applicable-var}: color-mix(in srgb, var(--dbx-calendar-not-applicable-color, var(--mat-sys-on-surface)) var(--dbx-calendar-not-applicable-tone, 30%), transparent);
    #{calendar.$cal-current-time-marker-color-var}: var(--dbx-accent-color);
    #{calendar.$cal-white-var}: var(--mat-sys-surface);
    #{calendar.$cal-gray-var}: var(--mat-sys-on-surface-variant);
    #{calendar.$cal-black-var}: var(--mat-sys-on-surface);
    #{calendar.$cal-gradient-var}: inset 0 0 10px 0 color-mix(in srgb, var(--mat-sys-surface) 20%, transparent);
  }
}

@mixin theme($theme-config) {
}