import { RectState } from './RectState';
import { computed, makeObservable } from 'mobx';

interface ResponsiveColumnsStateParams {
  gridState: {
    gap: number;
  };
  minItemWidth: number;
  rectState: RectState;
  containerPadding?: number;
}

export class ResponsiveColumnsState {
  readonly gridState;
  readonly _minItemWidth;
  readonly _rectState;
  readonly _containerPadding;

  constructor({
    gridState,
    minItemWidth,
    rectState,
    containerPadding = 0,
  }: ResponsiveColumnsStateParams) {
    this.gridState = gridState;
    this._minItemWidth = minItemWidth;
    this._rectState = rectState;
    this._containerPadding = containerPadding;

    makeObservable(this, {
      itemsContentWidth: computed,
      widthWithLastColumnGap: computed,
      columnCount: computed,
      containerPadding: computed,
    });
  }

  get gap() {
    return this.gridState.gap;
  }

  get minItemWidth() {
    return this._minItemWidth;
  }

  get itemsContentWidth() {
    return this._rectState.rect.width ?? 0;
  }

  get widthWithLastColumnGap() {
    return this.itemsContentWidth + this.gap - this.containerPadding;
  }

  get containerPadding() {
    return this._containerPadding;
  }

  get columnCount() {
    const { gap, minItemWidth, widthWithLastColumnGap } = this;

    const maxItemWidthWithGap = minItemWidth + gap;

    return Math.max(
      Math.floor(widthWithLastColumnGap / maxItemWidthWithGap),
      1,
    );
  }
}