import React, { forwardRef } from 'react';

import { ViewportType } from '../../constants/type';

import { Container, Wrapper } from './styled';

type Props = {
  children: React.ReactNode;
  viewport: ViewportType;
  rotation: number;
  displayMode: string;
};
type Ref = HTMLDivElement;

const Viewer = forwardRef<Ref, Props>(({
  children,
  viewport,
  rotation,
  displayMode,
}: Props, ref) => {
  const width = (Math.abs(rotation) / 90) % 2 === 1 ? viewport.height : viewport.width;

  return (
    <Container ref={ref} isFull={displayMode === 'full'}>
      <Wrapper width={width}>
        {children}
      </Wrapper>
    </Container>
  );
});

export default Viewer;