import { Component, computed, inject, resource, signal } from '@angular/core';
import { TaskItem } from './task-item';
import { Task } from './task';
import { TaskService } from './task-service';
import { RouterLink } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCircleX, lucideSquarePlus } from '@ng-icons/lucide';

@Component({
  selector: 'ksk-crm-home-page',
  imports: [TaskItem, RouterLink, FormsModule, NgIcon],
  providers: [provideIcons({ lucideSquarePlus, lucideCircleX })],
  template: `
    <section class="topBar">
      <div class="input-wrapper">
        <input [(ngModel)]="filterInput" type="text" placeholder="Поиск по задачам" />
        <button (click)="filterInput.set('')">
          <ng-icon name="lucideCircleX" size="20" strokeWidth="1.5" />
        </button>
      </div>
      <a routerLink="/new">
        <ng-icon name="lucideSquarePlus" size="36" />
      </a>
    </section>
    <section class="result">
      @for (task of filteredTasks(); track task.id) {
        <ksk-crm-task-item [task]="task" />
        @if (!$last) {
          <hr />
        }
      } @empty {
        <p>Список пуст</p>
      }
    </section>
  `,
  styles: `
    .topBar {
      display: flex;

      .input-wrapper {
        display: inline-flex;
        flex-grow: 1;
        position: relative;

        input {
          width: 100%;
          margin: auto 0;
        }

        button {
          border: none;
          background: none;
          position: absolute;
          top: 55%;
          right: 1em;
          transform: translateY(-50%);
          cursor: pointer;
          color: var(--color-primary);
        }

        input:placeholder-shown + button {
          display: none;
        }
      }

      a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.5em;
      }
    }

    .result {
      margin-top: 20px;
      display: flex;
      flex-direction: column;

      > p {
        text-align: center;
      }
    }

    hr {
      border: 1px solid var(--color-primary);
      opacity: 0.3;
    }
  `,
})
export class TaskList {
  taskService: TaskService = inject(TaskService);

  tasks = resource<Task[], null>({
    loader: () => this.taskService.getAllTasks(),
  });

  filterInput = signal('');

  filteredTasks = computed<Task[]>(() => {
    const s = this.filterInput();
    const tasks = this.tasks.value();

    if (!tasks) return [];
    if (s === '') return tasks;

    return tasks.filter(
      (task) =>
        task.name.includes(s) ||
        task.city.includes(s) ||
        task.streetAddress.includes(s) ||
        task.numberPhone.includes(s),
    );
  });
}