import {
  Title,
  Container,
  rem,
  createStyles,
  TypographyStylesProvider,
  Image,
} from "@mantine/core";
import { Carousel } from "@mantine/carousel";
import { useLoaderData } from "react-router-dom";
import Markdown from "react-markdown";

import { HeaderSimple } from "./Header";
import { FooterLinks } from "./Footer";
import headerLinks from "./assets/header.json";
import footerLinks from "./assets/footer.json";

const useStyles = createStyles((theme) => ({
  content: {
    padding: rem(30),
  },

  title: {
    fontSize: rem(55),
    lineHeight: 1.2,
    fontWeight: 900,
    paddingBottom: rem(20),
    [theme.fn.smallerThan("xs")]: {
      fontSize: rem(28),
    },
  },
}));

export function Article() {
  const articleData = useLoaderData();
  const { classes } = useStyles();
  const article = articleData.data[0].attributes;
  // console.log(articleData)

  const generateCarousel = () => {
    if (articleData.data[0].attributes.carousel.data) {
      return (
        <Carousel slideSize="70%" mih={200} mah={500} slideGap="md" loop>
          {articleData.data[0].attributes.carousel.data.map((image) => (
            <Carousel.Slide key={image.attributes.url}>
              <Image
                fit="fill"
                mih={200}
                mah={500}
                mx="auto"
                radius="md"
                src={`https://strapi.litmusmap.ru${image.attributes.url}`}
                alt="Random image"
              />
            </Carousel.Slide>
          ))}
        </Carousel>
      );
    }
  };

  return (
    <>
      <HeaderSimple links={headerLinks.links} />
      <Container className={classes.content}>
        <Title order={1} className={classes.title}>
          {article.title}
        </Title>
        <TypographyStylesProvider
          sx={{ "@media (prefers-color-scheme: dark)": { color: "#C1C2C5" } }}
        >
          <Markdown>{article.content}</Markdown>
        </TypographyStylesProvider>
        {generateCarousel()}
      </Container>
      <FooterLinks data={footerLinks.data} />
    </>
  );
}
