import {Component, EventEmitter, Input, Output} from '@angular/core';
import {FieldType, Operator, Predicate, Query} from "../query-builder/query-builder.component";
import {JsonPipe, NgForOf, NgIf} from "@angular/common";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {v4 as uuidv4} from 'uuid';
import {SchemaField} from "../../../app/search/search.component";

@Component({
  selector: 'app-query',
  standalone: true,
  imports: [
    NgForOf,
    ReactiveFormsModule,
    FormsModule,
    NgIf,
    JsonPipe
  ],
  templateUrl: './query.component.html',
  styleUrl: './query.component.css'
})
export class QueryComponent {

  @Input() query!: Query;
  @Input() fields!: SchemaField[];

  @Output() removeQuery = new EventEmitter<void>();
  @Output() queryChanged = new EventEmitter<void>();

  queryId = uuidv4();

  constructor() {}

  onFieldChange(predicate: Predicate, event: Event): void {
    const selectElement = event.target as HTMLSelectElement;
    const selectedValue = selectElement.value;
    const selectedField = this.fields.find(field => field.name === selectedValue);

    if(!selectedField) {
      return;
    }

    predicate.field = selectedField;
    predicate.operator = selectedField.validOperators[0];
  }

  onOperatorChange(predicate: Predicate, event: Event): void {
    const selectElement = event.target as HTMLSelectElement;
    const selectedOperatorType = selectElement.value;
    const selectedOperator = predicate.field?.validOperators.find(operator => operator.operatorType === selectedOperatorType);
    if (selectedOperator) {
      predicate.operator = selectedOperator;
      this.queryChanged.emit(); // Assuming `queryChanged` is an EventEmitter you've defined somewhere in your component
    }
  }

  addPredicate(): void {
    this.query.predicates.push({ field: null, operator: null, value: null });
    this.queryChanged.emit();
  }

  removePredicate(index: number): void {
    this.query.predicates.splice(index, 1);
    this.queryChanged.emit();
  }

  addSubQuery(): void {
    if (!this.query.childQueries) {
      this.query.childQueries = [];
    }
    this.query.childQueries.push({ predicates: [], logicalOperator: 'AND' });
    this.queryChanged.emit();
  }

  removeSubQuery(index: number): void {
    // @ts-ignore
    this.query.childQueries.splice(index, 1);
    this.queryChanged.emit();
  }

}
