import {
  ChangeDetectionStrategy,
  Component,
  input,
  output,
} from '@angular/core';

/**
 * ▲ 3: how many want a ticket. A button for whoever can vote (the
 * signed-in, on a public project), the count alone for the rest.
 */
@Component({
  selector: 'ts-vote',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (canVote()) {
      <button
        type="button"
        class="ts-vote"
        [class.is-mine]="voted()"
        [attr.aria-pressed]="voted()"
        [attr.aria-label]="
          (voted() ? 'Quitar mi voto · ' : 'Votar · ') + votes()
        "
        [title]="voted() ? 'Quitar mi voto' : 'Votar'"
        (click)="voteChange.emit(!voted())"
      >
        ▲ <span>{{ votes() }}</span>
      </button>
    } @else {
      <span class="ts-vote is-static" title="Votos">▲ {{ votes() }}</span>
    }
  `,
  styles: `
    :host {
      display: inline-flex;
    }
    /* @pi/ui styles every <button> (min-width, padding, radius, border) too
       specifically to override without !important. */
    .ts-vote {
      display: inline-flex;
      gap: 0.25rem;
      align-items: center;
      min-width: 0 !important;
      height: auto !important;
      padding: 0.0625rem 0.5rem !important;
      border: 1px solid var(--ts-line) !important;
      border-radius: 999px !important;
      line-height: 1.5;
      background: var(--ts-surface);
      color: var(--ts-muted);
      font: inherit;
      font-family: var(--ts-font-mono, ui-monospace, monospace);
      font-size: 0.75rem;
      white-space: nowrap;
      cursor: pointer;
      &:hover:not(.is-static) {
        border-color: var(--ts-brand);
        color: var(--ts-ink);
      }
      &.is-mine {
        border-color: var(--ts-brand) !important;
        background: color-mix(in srgb, var(--ts-brand) 12%, var(--ts-surface));
        color: var(--ts-brand);
      }
      &.is-static {
        cursor: default;
      }
    }
  `,
})
export class VoteComponent {
  readonly votes = input.required<number>();
  readonly voted = input(false);
  readonly canVote = input(false);
  /** The new state: true to vote, false to take it back. */
  readonly voteChange = output<boolean>();
}