import {
  GridBaseState,
  gridSizePresets,
  LayoutType,
  ToolbarCollectionState,
  topGridSizePreset,
} from '../../state';
import { GridSectionsState, SectionRange } from './GridSectionsState';
import { FiltersMap } from '@wix/bex-core';
import { computed, makeObservable } from 'mobx';

export interface GridSectionsSectionStateParams<T, F extends FiltersMap> {
  readonly imagePlacement?: 'side' | 'top';
  readonly gridSections: GridSectionsState<T, F>;
  readonly sectionDescriptor: SectionRange;
  readonly layoutType: LayoutType | undefined;
  readonly draggable?: 'none' | 'draggable';
}

export class GridSectionsSectionState<T, F extends FiltersMap> {
  gridBase;
  gridSections;
  sectionDescriptor;

  constructor(params: GridSectionsSectionStateParams<T, F>) {
    this.gridSections = params.gridSections;
    this.sectionDescriptor = params.sectionDescriptor;
    const { imagePlacement, draggable, layoutType } = params;
    const { toolbar } = this.gridSections;
    this.gridBase = new GridBaseState({
      container: toolbar.container,
      toolbar: toolbar as ToolbarCollectionState<unknown, Partial<F>>,
      collection: toolbar.collection,
      sizePreset: imagePlacement
        ? gridSizePresets[imagePlacement]
        : topGridSizePreset,
      range: params.sectionDescriptor.range,
      parentState: this.gridSections.parentState,
      layoutType,
      draggable,
    });

    makeObservable(this, {
      isLast: computed,
    });
  }

  get isLast() {
    const {
      sectionDescriptor: { sectionId },
      gridSections: { sections },
    } = this;
    return sections[sections.length - 1]?.sectionId === sectionId;
  }
}