import BaseBlockContent from "@sanity/block-content-to-react";
import React from "react";
import { Text, Heading, Link } from "@chakra-ui/react";
import { ExternalLinkIcon } from "@chakra-ui/icons";
import LinkBlock from "./linkBlock";
import Headings from "./headings";
import { List, ListItem, OrderedList, UnorderedList } from "@chakra-ui/react";
import Code from "./code";

import { Link as NextLink } from "next/link";
import Image from "../image";

// import getYouTubeId from "get-youtube-id";
// import YouTube from "react-youtube";

const BlockContent = ({ blocks, heading, text }) => {
  const serializers = {
    list: (props) => {
      const { type } = props;
      const bullet = type === "bullet";
      if (bullet) {
        return <UnorderedList>{props.children}</UnorderedList>;
      }
      return <OrderedList>{props.children}</OrderedList>;
    },
    listItem: (props) => <ListItem>{props.children}</ListItem>,

    types: {
      block(props) {
        switch (props.node.style) {
          case "h1":
            return (
              <Headings
                headingStyle={heading}
                type={props.node.style}
                children={props.children}
              />
            );
          case "h2":
            // return <Heading as="h2" {...heading}>{props.children}</Heading>;
            return (
              <Headings
                headingStyle={heading}
                type={props.node.style}
                children={props.children}
              />
            );
          case "h3":
            return (
              <Headings
                headingStyle={heading}
                type={props.node.style}
                children={props.children}
              />
            );
          case "h4":
            return (
              <Headings
                headingStyle={heading}
                type={props.node.style}
                children={props.children}
              />
            );
          case "blockquote":
            return (
              <Text {...text} as="cite">
                {props.children}
              </Text>
            );
          case "b":
            return (
              <Text {...text} fontWeight="bold">
                {children}
              </Text>
            );
          case "strong":
            return (
              <Text {...text} fontWeight="bold">
                {children}
              </Text>
            );

          case "listItem":
            return <BulletList mark={mark} children={children} />;
          default:
            return <Text {...text}>{props.children}</Text>;
        }
      },
      youtube: ({ node }) => {
        const { url } = node;
        const id = getYouTubeId(url);
        return <YouTube videoId={id} />;
      },
      figure(props) {
        return <Image image={props.node} />;
      },
      codeExample(props) {
        return <Code props={props.node} smallCode={false} />;
      },
      smallCode(props) {
        return <Code props={props.node} smallCode={true} />;
      },
    },
    marks: {
      link: ({ mark, children }) => {
        // Read https://css-tricks.com/use-target_blank/
        return <LinkBlock link={mark} children={children} />;
      },
    },
  };
  return <BaseBlockContent blocks={blocks} serializers={serializers} />;
};
export default BlockContent;