import { useCallback } from 'react';

import type { PageProps } from '~/src/components/Page';
import type { ToStructuredDataExtra } from '~/src/components/PageMetadata/toStructuredData';
import type { FC, ReactElement } from 'react';
import type { ArticleContentProps } from './ArticleContent';

import { PageTypes } from '~/lib/types';
import Box from '~/src/components/Box';
import BackgroundImage from '~/src/components/Image/BackgroundImage';
import LogoSongwhip from '~/src/components/Logos/LogoSongwhip';
import ClickableShareModal from '~/src/components/ModalShare/ClickableShareModal';
import Page from '~/src/components/Page';
import PageFooter from '~/src/components/PageFooter';
import PageMetadata from '~/src/components/PageMetadata';
import Text from '~/src/components/Text';
import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import useTheme from '~/src/hooks/useTheme';
import { useI18n } from '~/src/lib/i18n';
import formatDate from '~/src/lib/utils/formatDate';
import ArticleContent from './ArticleContent';
import toStructuredDataDefault from './toStructuredData';

export interface ArticlePageProps extends ArticleContentProps {
  title?: string;
  canonicalPath: string;
  subtitle?: string;
  description?: string;
  date?: Date;
  imageUrl?: string;
  imageAlt?: string;
  toStructuredData?: ToStructuredDataExtra;
  noIndex?: boolean;
  renderContent?: () => ReactElement;
  renderFooter?: () => ReactElement;
  pageProps?: PageProps;
}

const ArticlePage: FC<ArticlePageProps> = ({
  title,
  subtitle,
  description,
  date,
  children,
  canonicalPath,
  imageUrl,
  imageAlt,
  toStructuredData = toStructuredDataDefault,
  renderFooter,
  renderContent,
  pageProps,
  ...articleContentProps
}) => {
  const { t } = useI18n();
  const isLargeScreen = useIsLargeScreen();
  const theme = useTheme();

  return (
    <Page
      pageType={PageTypes.ARTICLE}
      withOverflowGradients
      renderHeaderContent={useCallback(
        () => (
          <LogoSongwhip size="2.4rem" />
        ),
        []
      )}
      renderHeaderRight={useCallback(
        () => (
          <ClickableShareModal fullHeight centerContent padding="5">
            <Text isBold>{t('app.actions.share')}</Text>
          </ClickableShareModal>
        ),
        []
      )}
      {...pageProps}
    >
      <PageMetadata
        title={title}
        ogType="article"
        description={description || subtitle}
        canonicalPath={canonicalPath}
        imageUrl={imageUrl}
        toStructuredData={toStructuredData}
      />
      <Box positionRelative>
        {imageUrl && (
          <BackgroundImage
            src={imageUrl}
            alt={imageAlt}
            objectPosition="50% 25%"
            gradient="linear-gradient(0deg,rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 33%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.5) 90%,rgba(0,0,0,0.7) 100%)"
            coverParent
            zIndex={-1}
          />
        )}
        {(title || subtitle) && (
          <Box
            minHeight={isLargeScreen ? '84vh' : '80vh'}
            padding="2rem 2rem 0"
            flexColumn
            centerContent
            positionRelative
          >
            {title && (
              <Text
                size="12vw"
                maxSize="7rem"
                bold
                centered
                maxWidth="70rem"
                isCentered
                color={theme.textColor90}
                shadow="0 1px 0.3rem rgba(0,0,0,0.3),0 1px 2rem rgba(0,0,0,0.66)"
              >
                <h1>{title}</h1>
              </Text>
            )}
            {subtitle && (
              <Text
                maxWidth="25em"
                isCentered
                tag="h2"
                size="5vw"
                maxSize="1.9rem"
                margin="1em 0 0"
                centered
                isParagraph
                color={theme.textColor90}
                shadow="0 1px 3px rgba(0,0,0,0.6)"
              >
                {subtitle}
              </Text>
            )}
          </Box>
        )}
      </Box>
      <ArticleContent {...articleContentProps}>
        {date && (
          <Text tag="time" margin="0 0 2.4rem" isItalic isBlock>
            {formatDate(date)}
          </Text>
        )}
        {renderContent ? renderContent() : children}
      </ArticleContent>
      {renderFooter ? renderFooter() : <PageFooter />}
      <style jsx>{`
        .hero {
          position: relative;
          font-size: 12vw;
        }

        @media (min-width: 500px) {
          .hero {
            font-size: 70px;
          }
        }
      `}</style>
    </Page>
  );
};

export default ArticlePage;