import { memo, useRef } from 'react';
import { SortableContainer } from 'react-sortable-hoc';
import PageItem from './PageItem';
import { getScaleForPageThumbnailLarge } from '../../../utils/functions';
import PageAdder from '../../Builder/PageAdder';

const PageList = SortableContainer(({
  acceptedItems,
  additionalPageItems,
  hashCode,
  itemAccessor,
  layoutSettings,
  onAnEventTrigger,
  onPageAdd,
  onPageClick,
  onPageDuplicate,
  onPageRemove,
  pages,
  selectedPages,
}) => {
  const pageContainerStyles = useRef({});
  const {
    reportBackgroundColor,
    reportLayoutHeight = 794,
    reportLayoutWidth = 1123,
  } = layoutSettings;
  const width = parseInt(reportLayoutWidth, 10);
  const height = parseInt(reportLayoutHeight, 10);
  const scale = getScaleForPageThumbnailLarge(width, height);

  pageContainerStyles.current = {
    height: height,
    transform: `scale(${scale})`,
    transformOrigin: '0 0',
    width: width,
  };

  return (
    <ul className="jfReport-pageThumbnailList d-flex j-between f-wrap">
      {pages.map(page => {
        const { backgroundColor } = page;
        const style = {
          ...pageContainerStyles.current,
          backgroundColor: backgroundColor ? backgroundColor : reportBackgroundColor || '#fff',
        };
        return (
          <PageItem
            key={`item-${page.id}-${page.order}`}
            acceptedItems={acceptedItems}
            additionalPageItems={additionalPageItems}
            hashCode={hashCode}
            index={page.order - 1}
            isSelected={selectedPages.indexOf(page.id) > -1}
            itemAccessor={itemAccessor}
            onAnEventTrigger={onAnEventTrigger}
            onPageAdd={onPageAdd}
            onPageClick={onPageClick}
            onPageDuplicate={onPageDuplicate}
            onPageRemove={onPageRemove}
            order={page.order}
            page={page}
            style={style}
          />
        );
      })}
      <div className="thumbnailWrapper forPageAdder d-flex j-end dir-col">
        <PageAdder
          onPageAdd={onPageAdd}
          pageCount={pages.length}
        />
      </div>
      <div className="spacer" />
      <div className="spacer" />
      <div className="spacer" />
    </ul>
  );
});

export default memo(PageList);