import { Component, Input, Output, EventEmitter } from '@angular/core';
import { UiComponent } from '../chart-config-manager.component';

@Component({
  selector: 'app-ui-component-form',
  templateUrl: './ui-component-form.component.html',
  styleUrls: ['./ui-component-form.component.scss']
})
export class UiComponentFormComponent {
  @Input() uiComponent: Partial<UiComponent> = {};
  @Input() isEdit = false;
  @Output() save = new EventEmitter<Partial<UiComponent>>();
  @Output() cancel = new EventEmitter<void>();

  componentTypes = [
    'input',
    'select',
    'checkbox',
    'radio',
    'textarea',
    'datepicker',
    'slider',
    'toggle'
  ];

  onSubmit(): void {
    this.save.emit(this.uiComponent);
  }

  onCancel(): void {
    this.cancel.emit();
  }
}