marketplaces/src/app/features/project-editor/sections/homepage-section.component.ts

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';

export interface LayoutStrategyOption {
  value: 'stack' | 'grid' | 'hero' | 'carousel' | 'split';
  labelKey: string;
  descKey: string;
}

@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));

  readonly layoutStrategyOptions: LayoutStrategyOption[] = [
    { value: 'stack', labelKey: 'builder.layoutStrategyStack', descKey: 'builder.layoutStrategyStackDesc' },
    { value: 'grid', labelKey: 'builder.layoutStrategyGrid', descKey: 'builder.layoutStrategyGridDesc' },
    { value: 'hero', labelKey: 'builder.layoutStrategyHero', descKey: 'builder.layoutStrategyHeroDesc' },
    { value: 'carousel', labelKey: 'builder.layoutStrategyCarousel', descKey: 'builder.layoutStrategyCarouselDesc' },
    { value: 'split', labelKey: 'builder.layoutStrategySplit', descKey: 'builder.layoutStrategySplitDesc' },
  ];

  layoutStrategyDescKey(strategy: string | undefined): string {
    return this.layoutStrategyOptions.find(option => option.value === strategy)?.descKey ?? '';
  }

  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,
          }
        }))
      }))
    }));
  }
}