import { useEffect, useState } from 'react';

const desktop = {
  width: 'min(900px, 80%)',
  height: 'min(auto, 80%)',
};

const mobileLanscape = {
  width: '800px',
  height: '500px',
};

const mobilePortrait = {
  width: '500px',
  height: '700px',
};

interface Size {
  width: string;
  height: string;
}

export const useResponsiveSize = (scale?: number): Size | undefined => {
  const [size, setSize] = useState<Size>();

  useEffect(() => {
    const handleResize = (): void => {
      if (
        window.innerWidth < 500 &&
        size?.width !== mobilePortrait.width &&
        (!scale || scale < 1)
      ) {
        setSize(mobilePortrait);
      } else if (
        (!scale || scale < 1) &&
        size?.width !== mobileLanscape.width
      ) {
        setSize(mobileLanscape);
      } else if (size?.width !== desktop.width) {
        setSize(desktop);
      }
    };
    handleResize();

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [scale]);

  return size;
};
