import { viewsContainerLeftMargin, viewsContainerRightMargin } from './styled';
import { ViewType } from './types';

const { innerWidth } = window;

const averageLetterWidth = 8.3;
const viewMarginsPaddings = 72;
const containerMargins = viewsContainerLeftMargin + viewsContainerRightMargin;

type PropsType = {
  views: ViewType[];
};

type ResultType = {
  paginatedViews: ViewType[][];
  remainingWidth: number;
};

const composeViewChunks = ({ views = [] }: PropsType) => {
  const result = views.reduce<ResultType>(
    (acc, view) => {
      const { remainingWidth, paginatedViews } = acc;
      const element = document.querySelector(`[data-view-key="${view.key}"]`);
      const elementRect = element?.getBoundingClientRect();
      let requiredWidth = 0;

      if (elementRect) {
        requiredWidth = elementRect.width;
      } else {
        requiredWidth = view.type === 'draft'
          ? view.label.length * averageLetterWidth + viewMarginsPaddings + 24
          : view.label.length * averageLetterWidth + viewMarginsPaddings;
      }

      // Case for when viewport has free space to accommodate a view
      if (remainingWidth > requiredWidth) {
        paginatedViews[paginatedViews.length - 1].push(view);

        return {
          paginatedViews,
          remainingWidth: remainingWidth - requiredWidth,
        };
      }

      paginatedViews.push([view]);
      return {
        paginatedViews,
        remainingWidth: innerWidth - containerMargins,
      };
    },
    {
      paginatedViews: [[]],
      remainingWidth: innerWidth - containerMargins,
    },
  );

  return result.paginatedViews;
};

export default composeViewChunks;