import type { FC } from 'react';
import type { ItemPageLayoutProps } from './types';

import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import { DesktopSingleColumnLayoutEdit } from './DesktopSingleColumnLayout/DesktopSingleColumnLayoutEdit';
import { DesktopTwoColumnLayoutEdit } from './DesktopTwoColumnLayout/DesktopTwoColumnLayoutEdit';
import { MobileSingleColumnLayoutEdit } from './MobileSingleColumnLayout/MobileSingleColumnLayoutEdit';

const ItemPageLayout: FC<ItemPageLayoutProps> = ({ settings, ...props }) => {
  const isLargeScreen = useIsLargeScreen();

  if (isLargeScreen) {
    switch (settings.desktopLayout) {
      case 'desktopSingleColumn': {
        return (
          <DesktopSingleColumnLayoutEdit
            {...props}
            {...settings.desktopSingleColumn}
          />
        );
      }

      case 'desktopTwoColumn': {
        const { content, ...restProps } = props;

        return (
          <DesktopTwoColumnLayoutEdit
            primaryContent={content}
            {...restProps}
            {...settings.desktopTwoColumn}
          />
        );
      }
    }
  }

  return (
    <MobileSingleColumnLayoutEdit {...props} {...settings.mobileSingleColumn} />
  );
};

export default ItemPageLayout;