/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */

import {
  booleanAttribute,
  ChangeDetectionStrategy,
  Component,
  HostAttributeToken,
  inject,
  input,
  InputSignal,
  InputSignalWithTransform,
  ViewEncapsulation,
} from '@angular/core';
import {MatIconButton} from '@angular/material/button';
import {MAT_TIMEPICKER_CONFIG} from './util';
import type {MatTimepicker} from './timepicker';

/** Button that can be used to open a `mat-timepicker`. */
@Component({
  selector: 'mat-timepicker-toggle',
  templateUrl: 'timepicker-toggle.html',
  host: {
    'class': 'mat-timepicker-toggle',
    '[attr.tabindex]': 'null',
    // Bind the `click` on the host, rather than the inner `button`, so that we can call
    // `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
    // it so that the input doesn't get focused automatically by the form field (See #21836).
    '(click)': '_open($event)',
  },
  exportAs: 'matTimepickerToggle',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [MatIconButton],
})
export class MatTimepickerToggle<D> {
  private _defaultConfig = inject(MAT_TIMEPICKER_CONFIG, {optional: true});
  private _defaultTabIndex = (() => {
    const value = inject(new HostAttributeToken('tabindex'), {optional: true});
    const parsed = Number(value);
    return isNaN(parsed) ? null : parsed;
  })();

  /** Timepicker instance that the button will toggle. */
  readonly timepicker: InputSignal<MatTimepicker<D>> = input.required<MatTimepicker<D>>({
    alias: 'for',
  });

  /** Screen-reader label for the button. */
  readonly ariaLabel = input<string | undefined>(undefined, {
    alias: 'aria-label',
  });

  /** Whether the toggle button is disabled. */
  readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, {
    transform: booleanAttribute,
    alias: 'disabled',
  });

  /** Tabindex for the toggle. */
  readonly tabIndex: InputSignal<number | null> = input(this._defaultTabIndex);

  /** Whether ripples on the toggle should be disabled. */
  readonly disableRipple: InputSignalWithTransform<boolean, unknown> = input(
    this._defaultConfig?.disableRipple ?? false,
    {transform: booleanAttribute},
  );

  /** Opens the connected timepicker. */
  protected _open(event: Event): void {
    if (this.timepicker() && !this.disabled()) {
      this.timepicker().open();
      event.stopPropagation();
    }
  }
}