import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-vr-slider',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="vr-slider absolute bottom-32 left-1/2 transform -translate-x-1/2 
                bg-black bg-opacity-80 text-white p-5 rounded-lg backdrop-blur-md"
         [style.width.px]="width">
      
      <div class="mb-3 text-center">{{ label }}</div>
      
      <input 
        type="range" 
        [min]="min" 
        [max]="max" 
        [step]="step"
        [value]="value"
        (input)="onValueChange($event)"
        (beforexrselect)="preventXRSelect($event)"
        class="w-full h-2 bg-white bg-opacity-30 rounded-lg appearance-none cursor-pointer">
      
      <div class="text-center mt-2">{{ displayValue }}</div>
      
      <div *ngIf="showButtons" class="flex justify-center gap-2 mt-4">
        <button 
          *ngFor="let button of buttons"
          (click)="onButtonClick(button.action)"
          class="bg-blue-600 bg-opacity-90 text-white px-4 py-2 rounded-full 
                 hover:bg-blue-700 transition-colors text-sm">
          {{ button.label }}
        </button>
      </div>
    </div>
  `,
  styles: [`
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background: #4285f4;
      border-radius: 50%;
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: #4285f4;
      border-radius: 50%;
      cursor: pointer;
      border: none;
    }

    input[type="range"]:focus {
      outline: none;
    }

    input[type="range"]:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3);
    }
  `]
})
export class VrSliderComponent {
  @Input() label = '';
  @Input() min = 0;
  @Input() max = 100;
  @Input() step = 1;
  @Input() value = 50;
  @Input() unit = '';
  @Input() width = 300;
  @Input() showButtons = false;
  @Input() buttons: Array<{label: string, action: string}> = [];

  @Output() valueChange = new EventEmitter<number>();
  @Output() buttonClick = new EventEmitter<string>();

  get displayValue(): string {
    return `${this.value}${this.unit}`;
  }

  onValueChange(event: Event): void {
    const target = event.target as HTMLInputElement;
    const newValue = parseFloat(target.value);
    this.value = newValue;
    this.valueChange.emit(newValue);
  }

  onButtonClick(action: string): void {
    this.buttonClick.emit(action);
  }

  preventXRSelect(event: Event): void {
    event.preventDefault();
  }
}