import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
import { FastOverlayComponent } from "./fast-overlay.component";

//fixed is the default and centers to the screen
//absolute centers to the parent element, and will move with a floating window
//relative position where you put it
type positionType = 'fixed' | 'absolute' | 'relative';

@Component({
  selector: 'fast-spinner',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [FastOverlayComponent],
  template: `
@if(hasOverlay()) { <fast-overlay [isContained]="this.position() === 'absolute'" [opacityLevel]="'light'" /> }
<svg id="spinner" xmlns="http://www.w3.org/2000/svg" aria-live="polite" aria-busy="true" viewBox="0 0 26 26" role="img" aria-label="Loading"
  [style.width.px]="size()" [style.height.px]="size()" [style.position]="position() === 'relative' ? 'relative' : 'absolute'"
  [style.top]="position() === 'relative' ? '0' : '50%'" [style.left]="position() === 'relative' ? '0' : '50%'"
  [style.transform]="position() === 'relative' ? 'none' : 'translate(-50%, -50%)'"
>
  <circle id="background" cx="13" cy="13" r="13" fill="gray" stroke="none"></circle>
  <circle id="outer-spinner" cx="13" cy="13" r="12" opacity="1" fill="none" stroke-width="2" stroke-dasharray="19 19"></circle>
  <circle id="inner-spinner" cx="13" cy="13" r="5" opacity="1" fill="none" stroke-width="1" stroke-dasharray="8 8"></circle>
</svg>
  `,
  styles: `

@keyframes rotateForward {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateBackward {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

#inner-spinner {
  transform-origin: 50% 50%;
  animation: rotateBackward 1s linear infinite;
  stroke: var(--color-highlight);
}

#outer-spinner {
  transform-origin: 50% 50%;
  animation: rotateForward 1s linear infinite;
  stroke: var(--color-highlight);
}
`
})
export class FastSpinnerComponent {

  size = input(65); // Size in pixels
  position = input<positionType>('fixed'); // Whether the spinner is contained within a parent element
  hasOverlay = input(true); // Whether the spinner has a shaded overlay that prevents clicks

  @HostBinding('class') get hostClass() {
    if (this.position() === 'relative')
      return `z-10 relative drop-shadow-[0_0_2px_black,0_0_2px_white]`;

    const sizing = this.hasOverlay() ? 'w-full h-full' : 'w-auto h-auto'
    const layout = this.hasOverlay() ? 'top-0 left-0' : 'top-1/2 left-1/2';

    return `z-10 ${this.position()} ${sizing} ${layout} `;
  }
}
