import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';

@Component({
  selector: 'app-project-editor-homepage-section',
  standalone: true,
  imports: [DragDropModule, FormsModule, TranslatePipe],
  templateUrl: './homepage-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorHomepageSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  readonly homePage = this.facade.homepagePage;
  readonly sections = computed(() => [...(this.homePage()?.sections ?? [])].sort((a, b) => a.order - b.order));

  drop(event: CdkDragDrop<any[]>): void {
    const sections = [...this.sections()];
    moveItemInArray(sections, event.previousIndex, event.currentIndex);
    this.facade.updateBootstrap(current => ({
      ...current,
      pages: current.pages.map(page => page.id !== this.homePage()?.id ? page : ({
        ...page,
        sections: sections.map((section, index) => ({ ...section, order: index + 1 }))
      }))
    }));
  }

  updateSection(sectionId: string, field: 'visible' | 'type', value: unknown): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      pages: current.pages.map(page => page.id !== this.homePage()?.id ? page : ({
        ...page,
        sections: page.sections.map(section => section.id !== sectionId ? section : ({
          ...section,
          ...(field === 'type' ? { type: String(value) } : { visible: Boolean(value) })
        }))
      }))
    }));
  }

  updateLayout(sectionId: string, key: 'strategy' | 'columns', value: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      pages: current.pages.map(page => page.id !== this.homePage()?.id ? page : ({
        ...page,
        sections: page.sections.map(section => section.id !== sectionId ? section : ({
          ...section,
          layout: {
            ...section.layout,
            [key]: key === 'columns' ? Number(value) || 1 : value,
          }
        }))
      }))
    }));
  }
}