import { useCallback } from 'react';
import classNames from 'classnames';
import Debug from 'debug';

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

import toSizedImageUrlNext from '~/src/lib/toSizedImageUrlNext';
import Background from '../components/Background';
import SingleColumnLayout from '../SingleColumnLayout';

const debug = Debug('songwhip/components/ItemPage');

const SIZED_IMAGE_WIDTH = 2400;

const DesktopSingleColumnLayout: FC<DesktopSingleColumnLayoutProps> = ({
  image,
  testId,
  ...singleColumnLayoutProps
}) => {
  debug('render', {
    image,
  });

  const sizedImage =
    image?.url &&
    toSizedImageUrlNext({
      url: image.url,
      width: SIZED_IMAGE_WIDTH,
    });

  return (
    <SingleColumnLayout
      testId={classNames('itemPage', 'desktopSingleColumnLayout', testId)}
      spaceBetweenSections="5.2rem"
      renderBackground={useCallback(
        ({ imageRef }) => {
          return (
            <Background
              nodeRef={imageRef}
              image={sizedImage}
              height="100vh"
              withMaskGradient
            />
          );
        },
        [image]
      )}
      spaceAboveContent={
        {
          none: singleColumnLayoutProps.header.height,
          medium: '24vh',
          large: '60vh',
        }[image.layout.spaceAboveContent]
      }
      {...singleColumnLayoutProps}
    />
  );
};

export default DesktopSingleColumnLayout;