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

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { InputComponent } from '../../../shared/ui/input/input.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';

@Component({
  selector: 'app-project-editor-widgets-section',
  standalone: true,
  imports: [FormsModule, TranslatePipe, InputComponent, SectionCardComponent, ToggleComponent],
  templateUrl: './widgets-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorWidgetsSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  readonly widgets = this.facade.homepageWidgets;

  updateWidget(widgetId: string, updater: (props: Record<string, unknown>) => Record<string, unknown>): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      pages: current.pages.map(page => ({
        ...page,
        sections: page.sections.map(section => ({
          ...section,
          widgets: section.widgets.map(widget => widget.id !== widgetId ? widget : ({
            ...widget,
            props: updater(widget.props ?? {})
          }))
        }))
      }))
    }));
  }

  updateProp(widgetId: string, key: string, value: unknown): void {
    this.updateWidget(widgetId, props => ({ ...props, [key]: value }));
  }

  updateJson(widgetId: string, raw: string): void {
    try {
      this.updateWidget(widgetId, () => JSON.parse(raw));
    } catch {
      // Ignore malformed draft until valid JSON is provided.
    }
  }

  propsJson(props: Record<string, unknown>): string {
    return JSON.stringify(props ?? {}, null, 2);
  }
}