@use 'sass:map';
@use '../core/theming/theming';
@use '../core/theming/palette';
@use '../core/style/private';
@use '../core/typography/typography';
@use '../core/typography/typography-utils';

$selected-today-box-shadow-width: 1px;
$calendar-body-font-size: 13px !default;
$calendar-weekday-table-font-size: 11px !default;
$calendar-header-font-size: 28px !default;
$clock-font-size: 14px !default;

@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  $is-dark-theme: map.get($config, is-dark);
  $primary: map.get($config, primary);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);

  $warn: map.get($config, warn);
  $disabled-color: theming.get-color-from-palette($foreground, disabled-text);

  .mtx-datetimepicker-content {
    background-color: theming.get-color-from-palette($background, card);
    color: theming.get-color-from-palette($foreground, text);

    @include private.private-theme-elevation(8, $config);
  }

  .mtx-calendar-header {
    background-color: theming.get-color-from-palette($primary);
    color: white;
  }

  .mtx-calendar-body-label {
    color: theming.get-color-from-palette($foreground, secondary-text);
  }

  .mtx-calendar-table-header {
    color: theming.get-color-from-palette($foreground, hint-text);
  }

  .mtx-calendar-body-cell-content {
    color: theming.get-color-from-palette($foreground, text);

    &.mtx-calendar-body-selected {
      background-color: theming.get-color-from-palette($primary);
      color: white;

      &.mtx-calendar-body-today {
        box-shadow:
          inset 0 0 0 $selected-today-box-shadow-width
          theming.get-color-from-palette($primary, default-contrast);
      }
    }

    &:not(.mtx-calendar-body-selected) {
      &.mtx-calendar-body-today {
        border-color: theming.get-color-from-palette($foreground, hint-text);
      }
    }
  }

  .mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover,
  .mtx-calendar-body-active {
    & > .mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected) {
      background-color: theming.get-color-from-palette($primary, .3);
    }
  }

  .mtx-calendar-body-disabled {
    > .mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected) {
      color: $disabled-color;
    }

    > .mtx-calendar-body-today:not(.mtx-calendar-body-selected) {
      border-color: $disabled-color;
    }

    > .mtx-calendar-body-selected {
      background-color: theming.get-color-from-palette($primary, .4);
    }
  }

  .mtx-calendar-previous-button,
  .mtx-calendar-next-button {
    &.disabled {
      color: $disabled-color;
    }
  }

  .mtx-clock-wrapper {
    background-color: theming.get-color-from-palette($foreground, divider);
  }

  .mtx-clock-center {
    background-color: theming.get-color-from-palette($primary);
  }

  .mtx-clock-hand {
    background-color: theming.get-color-from-palette($primary);

    &::before {
      background-color: theming.get-color-from-palette($primary);
    }
  }

  .mtx-clock-cell {
    color: theming.get-color-from-palette($foreground, text);

    &.mtx-clock-cell-selected {
      background-color: theming.get-color-from-palette($primary);
      color: white;
    }

    &:not(.mtx-clock-cell-selected, .mtx-clock-cell-disabled):hover {
      background-color: theming.get-color-from-palette($background, hover);
    }

    &.mtx-clock-cell-disabled {
      color: $disabled-color;
    }
  }

  .mtx-datetimepicker-toggle-active {
    color: theming.get-color-from-palette(map.get($config, primary), text);

    &.mat-accent {
      color: theming.get-color-from-palette(map.get($config, accent), text);
    }

    &.mat-warn {
      color: theming.get-color-from-palette(map.get($config, warn), text);
    }
  }

  .mtx-time-input {
    color: theming.get-color-from-palette($foreground, text);
    background-color: theming.get-color-from-palette($background, disabled-button);
    outline-color: theming.get-color-from-palette($foreground, text);
    border: none;

    &.mtx-time-input-active {
      color: theming.get-color-from-palette($primary, text);
      outline-color: theming.get-color-from-palette($primary, text);
      caret-color: theming.get-color-from-palette($primary, text);
      background-color: theming.get-color-from-palette($primary, .2);
    }

    &.mtx-time-input-active:focus {
      background-color: theming.get-color-from-palette($background, background);
      color: theming.get-color-from-palette($primary, text);
      outline-color: theming.get-color-from-palette($primary, text);
    }

    &.mtx-time-input-active:focus::placeholder {
      color: theming.get-color-from-palette($primary, .6);
      outline-color: theming.get-color-from-palette($primary, .6);
    }

    &.mtx-time-input-warning {
      outline-color: theming.get-color-from-palette($warn, text);

      &.mtx-time-input-active,
      &.mtx-time-input-active:focus {
        outline-color: theming.get-color-from-palette($warn, text);
      }
    }
  }

  .mtx-time-ampm {
    border-color: theming.get-color-from-palette($primary, text);

    :is(.mtx-time-am, .mtx-time-pm) {
      background-color: theming.get-color-from-palette($background, card);
      color: theming.get-color-from-palette($primary, text);

      &.mtx-time-ampm-active {
        background-color: theming.get-color-from-palette($primary, .2);
      }

      &:focus {
        outline-color: theming.get-color-from-palette($primary, text);
      }
    }
  }
}

@mixin typography($config-or-theme) {
  $config: typography.private-typography-to-2014-config(
    theming.get-typography-config($config-or-theme)
  );

  .mtx-calendar {
    font-family: typography-utils.font-family($config);
  }

  .mtx-calendar-body {
    font-size: $calendar-body-font-size;
  }

  .mtx-calendar-body-label,
  .mtx-calendar-period-button {
    font: {
      size: typography-utils.font-size($config, button);
      weight: typography-utils.font-weight($config, button);
    }
  }

  .mtx-calendar-table-header th {
    font: {
      size: $calendar-weekday-table-font-size;
      weight: typography-utils.font-weight($config, body-1);
    }
  }

  .mtx-calendar-header-date-time {
    font-size: $calendar-header-font-size;
  }

  .mtx-calendar-header-ampm-container {
    font-size: .65em;
  }

  .mtx-clock {
    font-size: $clock-font-size;
  }
}

@mixin _density($config-or-theme) {}

@mixin theme($theme-or-color-config) {
  $theme: theming.private-legacy-get-theme($theme-or-color-config);
  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-datetimepicker') {
    $color: theming.get-color-config($theme);
    $density: theming.get-density-config($theme);
    $typography-default: typography.define-typography-config();
    $typography: theming.get-typography-config($theme, $typography-default);

    @if $color != null {
      @include color($color);
    }
    @if $density != null {
      @include _density($density);
    }
    @if $typography != null {
      @include typography($typography);
    }
  }
}