@use 'sass:color';
@use 'sass:map';
@use '@angular/material' as mat;

@use '../utils';
@use '../variables';

@function get-unthemable-tokens() {
  @return (opacity-active: 0.15, content-border-radius: 0.25rem);
}

@function get-color-tokens($theme, $palette-name: primary) {
  $foreground: map.get($theme, foreground);
  $secondary-text: mat.m2-get-color-from-palette($foreground, secondary-text);

  $background: map.get($theme, background);
  $background-color: mat.m2-get-color-from-palette($background, background);

  $toggle-color: get-toggle-color-tokens($theme, $palette-name);
  $content-color: get-content-color-tokens($theme, $palette-name);

  @return utils.merge-all(
    $toggle-color,
    $content-color,
    (
      clock-dial-cell-active-text-color: #fff,
      clock-dial-cell-disabled-text-color:
        mat.m2-get-color-from-palette($foreground, disabled-button),
      clock-dial-cell-disabled-background-color: transparent,
      content-background-color: mat.m2-get-color-from-palette($background, card),
      content-text-color: mat.m2-get-color-from-palette($foreground, text),
      content-layout-title-color: $secondary-text,
      toggle-mode-button-color: $secondary-text,
      time-period-border-color: mat.m2-get-color-from-palette($foreground, divider),
      time-period-disabled-text-color: mat.m2-get-color-from-palette($foreground, disabled-button),
      time-period-disabled-background-color:
        mat.m2-get-color-from-palette($background, disabled-button),
      clock-dial-background-color: $background-color,
      clock-dial-value-background-color: $background-color,
      time-inputs-field-background-color: $background-color,
      toggle-color: $secondary-text,
    )
  );
}

@function get-content-color-tokens($theme, $palette-name: primary) {
  $palette: map.get($theme, $palette-name);
  $color: mat.m2-get-color-from-palette($palette);

  @return (
    clock-dial-value-active-text-color: $color,
    clock-dial-value-active-background-color:
      mat.m2-get-color-from-palette($palette, default, var(--mat-timepicker-opacity-active)),
    time-period-active-text-color: $color,
    time-period-active-background-color:
      mat.m2-get-color-from-palette($palette, default, var(--mat-timepicker-opacity-active)),
    clock-dial-center-point-color: $color,
    clock-dial-hand-color: $color,
    clock-dial-hand-disabled-color: transparent,
    clock-dial-hand-value-point-color: $color,
    clock-dial-hand-value-point-disabled-color: color.change($color, $alpha: 0.4),
    clock-dial-cell-unthemable-color: transparent,
    clock-dial-cell-active-background-color: $color,
    clock-dial-cell-active-disabled-color: color.change($color, $alpha: 0.4)
  );
}

@function get-toggle-color-tokens($theme, $palette-name: primary) {
  $palette: map.get($theme, $palette-name);
  $color: mat.m2-get-color-from-palette($palette);

  @return (toggle-active-color: $color);
}

@function get-typography-tokens($theme) {
  @return (
    content-layout-title-font-size: variables.$timepicker-content-title-font-size,
    content-layout-title-font-weight: mat.m2-font-weight($theme, subtitle-2),
    content-layout-separator-font-size: variables.$inputs-separator-font-size,
    content-layout-separator-line-height: variables.$inputs-separator-line-height,
    time-inputs-field-font-size: variables.$input-font-size,
    time-inputs-field-line-height: 1.25,
    clock-dial-value-font-family: var(--mat-form-field-container-text-font),
    clock-dial-value-font-size: variables.$input-font-size,
    clock-dial-value-letter-spacing: 0.5px
  );
}