import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { validColorValidator } from 'ngx-colors';

@Component({
  selector: 'app-select-color',
  standalone: false,
  templateUrl: './select-color.component.html',
  styleUrl: './select-color.component.css'
})
export class SelectColorComponent implements OnInit {
  showColorPicker: boolean;
  colorControl: FormControl;
  eventColorControl: FormControl;
  colorPickerControl: FormControl;

  constructor() {
    this.showColorPicker = false;
    this.colorControl = new FormControl('');
    this.eventColorControl = new FormControl("rgb(79, 195, 255)", validColorValidator());
    this.colorPickerControl = new FormControl("rgb(79, 195, 255)");
  }

  ngOnInit(): void {
    this.colorControl.valueChanges.subscribe(res => {
      if(res == 'custom'){
        this.showColorPicker = true;
      }else{
        this.showColorPicker = false;
      }
    });
    
    this.eventColorControl.valueChanges.subscribe((color) => {
      if(this.eventColorControl.valid){
        this.colorPickerControl.setValue(color, {
          emitEvent: false,
        });
      }
    });

    this.colorPickerControl.valueChanges.subscribe((color) => {
      this.eventColorControl.setValue(color, {
        emitEvent: false,
      })
    });
  }
}
