import clsx from 'clsx';
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';

import { useAppSelector } from '@/store/hooks';

import ArtboardController from './ArtboardController';
import styles from './Center.module.scss';
import Header from './Header';
import Page from './Page';

const Center = () => {
  const orientation = useAppSelector((state) => state.build.page.orientation);

  const resume = useAppSelector((state) => state.resume);
  const layout: string[][][] = get(resume, 'metadata.layout');

  if (isEmpty(resume)) return null;

  return (
    <div className={clsx(styles.center)}>
      <Header />

      <TransformWrapper
        centerOnInit
        minScale={0.25}
        initialScale={0.95}
        limitToBounds={false}
        centerZoomedOut={false}
        pinch={{ step: 1 }}
        wheel={{ step: 0.1 }}
      >
        {(controllerProps) => (
          <>
            <TransformComponent wrapperClass={styles.wrapper}>
              <div
                className={clsx({
                  [styles.artboard]: true,
                  'flex-col': orientation === 'vertical',
                })}
              >
                {layout.map((_, pageIndex) => (
                  <Page key={pageIndex} page={pageIndex} showPageNumbers />
                ))}
              </div>
            </TransformComponent>

            <ArtboardController {...controllerProps} />
          </>
        )}
      </TransformWrapper>
    </div>
  );
};

export default Center;