import React from 'react';
import type { ThemeProviderProps } from '../theme/theme-provider';
import { ThemeProvider } from '../theme/theme-provider';
import { Grid } from '../atoms/grid';
import { Flex } from '../atoms/flex';
import { Heading } from '../atoms/heading';
import { Typo } from '../atoms/typo';
import { AspectRatio } from '../atoms/aspect-ratio';
import { Badge } from '../atoms/badge';
import { Box } from '../atoms/box';
import { Button } from '../atoms/button';

interface Tag {
  name?: string;
  id: string;
}
export interface LearningPostProps {
  defaultThemeProps?: Partial<ThemeProviderProps>;
  html?: string;
  title?: string;
  metaDescription?: string;
  /** 섬네일에 해당하는 이미지 컴포넌트 */
  imageComp?: React.ReactNode;
  tags?: Tag[];
  children?: React.ReactNode;
  onPageBack?: () => void;
}

export function LearningPost(props: LearningPostProps): React.ReactNode {
  const {
    defaultThemeProps,
    html,
    tags,
    title,
    metaDescription,
    imageComp,
    onPageBack,
    children,
  } = props;
  return (
    <ThemeProvider
      {...defaultThemeProps}
      accentColor="iris"
      scaling="110%"
      style={{}}
    >
      {html ? (
        <Grid
          columns={{ initial: '1', md: '130px 1fr 130px' }}
          gap={{ initial: '2', md: '5' }}
          height="100%"
          justify="center"
          pb="160px"
          position="relative"
          px="4"
          width="100%"
        >
          <div />
          <Flex
            align="center"
            direction="column"
            maxWidth="880px"
            mt={{ initial: '3', md: '8' }}
            overflow="hidden"
            width="100%"
          >
            <Grid align="start" columns={{ initial: '1', sm: '2' }} gap="2">
              <Grid
                gap="3"
                mb={{ initial: '4', sm: '0' }}
                style={{ alignSelf: 'flex-start' }}
              >
                <Heading
                  style={{
                    fontSize: '2.4rem',
                    lineHeight: 1.25,
                    wordBreak: 'keep-all',
                  }}
                  variant="heading1"
                >
                  {title}
                </Heading>
                <Typo>{metaDescription}</Typo>
                <Flex gap="1" wrap="wrap">
                  {tags?.map((el) => {
                    if (el.name?.startsWith('filter')) return;
                    return (
                      <Badge key={el.id} size="large" variant="solid">
                        {el.name}
                      </Badge>
                    );
                  })}
                </Flex>
              </Grid>

              <AspectRatio
                ratio={5 / 3}
                style={{
                  overflow: 'hidden',
                  borderRadius: 'var(--radius-4)',
                  objectFit: 'cover',
                }}
              >
                {imageComp}
              </AspectRatio>
            </Grid>

            <Box mt="5" width="100%">
              <div
                className="gh-content"
                dangerouslySetInnerHTML={{ __html: html }}
              />
            </Box>
          </Flex>
          {children}
        </Grid>
      ) : (
        <Flex
          align="center"
          direction="column"
          gap="6"
          height="100%"
          justify="center"
          width="100%"
        >
          <Heading variant="heading1">콘텐츠를 찾을 수 없습니다.</Heading>
          <Heading
            align="center"
            color="gray"
            variant="heading4"
            weight="regular"
          >
            {`요청하신 콘텐츠를 찾을 수 없습니다.
        잠시 후 다시 시도해주세요.`}
          </Heading>
          <Button onClick={onPageBack} size="large">
            뒤로가기
          </Button>
        </Flex>
      )}
    </ThemeProvider>
  );
}
