import {
  ChangeDetectionStrategy,
  Component,
  model,
  signal,
} from '@angular/core';
import { AccordionModule } from 'primeng/accordion';
import { Column } from '../duckdb.service';
import { Checkbox } from 'primeng/checkbox';
import { FormsModule } from '@angular/forms';
import { Button } from 'primeng/button';
import { Tooltip } from 'primeng/tooltip';
import { Dialog } from 'primeng/dialog';
import { FloatLabel } from 'primeng/floatlabel';
import { InputText } from 'primeng/inputtext';
import { Select } from 'primeng/select';
import { Field, form } from '@angular/forms/signals';

@Component({
  selector: 'app-column-editor',
  standalone: true,
  imports: [
    AccordionModule,
    Checkbox,
    FormsModule,
    Button,
    Tooltip,
    Dialog,
    FloatLabel,
    InputText,
    Select,
    Field,
  ],
  template: `
    <p-accordion [value]="0">
      <p-accordion-panel [value]="0">
        <p-accordion-header>Columns</p-accordion-header>
        <p-accordion-content>
          <ul>
            @for (column of columns(); track $index) {
              <li class="flex items-baseline">
                <p-checkbox
                  (ngModelChange)="checkboxChanged($index)"
                  [binary]="true"
                  [inputId]="column.name"
                  name="group"
                  [ngModel]="column.enabled"
                />
                <label
                  [for]="column.name"
                  [pTooltip]="column.name"
                  tooltipPosition="bottom"
                  class="ml-2 grow shrink basis-0 truncate cursor-pointer"
                >
                  {{ column.name }}
                </label>
                <p-button
                  (onClick)="editColumn($index)"
                  icon="pi pi-pencil"
                  text
                  pTooltip="Edit Column"
                ></p-button>
              </li>
            }
          </ul>
        </p-accordion-content>
      </p-accordion-panel>
    </p-accordion>
    <p-dialog [(visible)]="editDialogVisible" header="Edit Column">
      <p-float-label variant="in">
        <input pInputText id="column-edit-name" [field]="editingColumn.name" />
        <label for="column-edit-name">Name</label>
      </p-float-label>
      <p-float-label variant="in">
        <p-select
          inputId="column-edit-type"
          [field]="editingColumn.type"
        ></p-select>
        <label for="column-edit-type">Type</label>
      </p-float-label>
      <div class="flex items-center gap-2">
        <p-check-box
          [field]="editingColumn.enabled"
          [binary]="true"
          inputId="column-edit-enabled"
        ></p-check-box>
        <label for="column-edit-enabled">Enabled</label>
      </div>
    </p-dialog>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ColumnEditorComponent {
  columns = model<Column[]>();

  protected editDialogVisible = signal(false);

  protected currentColumn = signal<Column>({
    name: '',
    enabled: true,
    type: 'string',
  });

  protected editingColumn = form(this.currentColumn);

  protected checkboxChanged(index: number) {
    this.columns.update((columns) => {
      if (columns) {
        let enabledColumns = columns?.slice();
        enabledColumns[index] = {
          ...enabledColumns[index],
          enabled: !enabledColumns[index].enabled,
        };
        return enabledColumns;
      }
      return columns;
    });
  }

  protected editColumn(index: number) {
    const columns = this.columns();
    if (columns) {
      this.currentColumn.set(columns[index]);
      this.editDialogVisible.set(true);
    }
  }
}