import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

export interface FormElement {
  type: 'text' | 'select' | 'radio' | 'checkbox' | 'textarea' | 'number' | 'email' | 'date';
  label: string;
  placeholder?: string;
  required: boolean;
  options?: string[];
  id?: string;
  name?: string;
  value?: string;
  min?: number;
  max?: number;
  pattern?: string;
  description?: string;
}

@Component({
  selector: 'app-properties-panel',
  templateUrl: './properties-panel.component.html',
  styleUrls: ['./properties-panel.component.css']
})
export class PropertiesPanelComponent implements OnChanges {


  @Input() element: FormElement | null = null;
  @Output() elementChange = new EventEmitter<FormElement>();
  @Output() closePanel = new EventEmitter<void>();

  optionsText: string = '';

  ngOnChanges(changes: SimpleChanges) {
    if (changes['element'] && this.element) {
      this.optionsText = this.element.options ? this.element.options.join(', ') : '';
    }
  }

  onOptionsChange(value: string) {
    if (this.element) {
      this.element.options = value.split(',').map(opt => opt.trim()).filter(opt => opt.length > 0);
      this.emitChanges();
    }
  }

  onValueChange() {
    this.emitChanges();
  }

  emitChanges() {
    if (this.element) {
      this.elementChange.emit({ ...this.element });
    }
  }

  onCloseClick() {
    this.closePanel.emit();
  }
}
