import { useCallback, useMemo } from 'react';
import classNames from 'classnames';

import type { BoxProps } from '~/src/components/Box';
import type { ImageProps } from '~/src/components/Image';
import type { FC } from 'react';
import type { MobileSingleColumnLayoutProps } from './types';

import Box from '~/src/components/Box';
import Image from '~/src/components/Image';
import { toVhValue } from '~/src/components/Vh';
import { DEVICE_WIDTH_BREAKPOINT } from '~/src/lib/device/constants';
import { useI18n } from '~/src/lib/i18n';
import toSizedImageUrlNext from '~/src/lib/toSizedImageUrlNext';
import SingleColumnLayout from '../SingleColumnLayout';

const SIZED_IMAGE_WIDTH = DEVICE_WIDTH_BREAKPOINT * 2;
const SPACE_BETWEEN_SECTIONS = '3.9rem';

const MobileSingleColumnLayout: FC<MobileSingleColumnLayoutProps> = ({
  image,
  testId,
  ...singleColumnLayoutProps
}) => {
  const { t } = useI18n();

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

  return (
    <SingleColumnLayout
      {...singleColumnLayoutProps}
      contentStyle={{ padding: `0 0 10rem` }}
      spaceBetweenSections={SPACE_BETWEEN_SECTIONS}
      testId={classNames('mobileSingleColumnLayout', testId)}
      renderBackground={useCallback(
        ({ imageRef }) => {
          const customProps: {
            container?: Partial<BoxProps>;
            image?: Partial<ImageProps>;
          } = (() => {
            switch (image.layout.type) {
              case 'fit':
                return {
                  container: {
                    height: '100vw',
                  },

                  image: {
                    cover: true,
                  },
                };

              case 'fade':
                return {
                  container: {
                    height: toVhValue(68),
                  },

                  image: {
                    style: {
                      WebkitMaskImage: `linear-gradient(rgba(0,0,0,.9) 0%, rgba(0,0,0,.9) 40%, rgba(0,0,0,0) 100%)`,
                    },
                  },
                };

              default:
                return {};
            }
          })();

          return (
            <Box fullHeight {...customProps.container} nodeRef={imageRef}>
              <Image
                testId="mobileLayoutImage"
                fullHeight
                fullWidth
                cover
                src={sizedImageUrl}
                alt={t('item.pageBackgroundImageAlt')}
                aspect={
                  image?.width && image.height
                    ? image?.width / image?.height
                    : undefined
                }
                fadeInDuration={400}
                imgStyle={{
                  filter: 'saturate(.92)',
                  opacity: 0.9,
                  ...customProps.image?.imgStyle,
                }}
                {...customProps.image}
              />
            </Box>
          );
        },
        [image]
      )}
      spaceAboveContent={useMemo(() => {
        switch (image.layout.type) {
          case 'fit':
            return '100vw';

          case 'fade':
            return {
              none: singleColumnLayoutProps.header.height,
              medium: `calc(${singleColumnLayoutProps.header.height} + 84vw)`,
              large: toVhValue(70),
            }[image.layout.spaceAboveContent];
        }
      }, [image, singleColumnLayoutProps.header.height])}
    />
  );
};

export default MobileSingleColumnLayout;