import Image from "next/image"
import Link from "next/link"

import { EmbedEnum } from "@/types/requests/utils/embeds"
import { RTEItemTypeEnum, RTETypeEnum } from "@/types/rte/enums"
import { RTEMarkType } from "@/types/rte/node"

import styles from "./jsontohtml.module.css"

import type { EmbedByUid } from "@/types/components/jsontohtml"
import type { RTENext, RTEDefaultNode, RTENode, RTERegularNode } from "@/types/rte/node"
import type { RenderOptions } from "@/types/rte/option"

export const renderOptions: RenderOptions = {
  [RTETypeEnum.a]: (node: RTERegularNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
    if (node.attrs.url) {
      return (
        <a href={node.attrs.url} target={node.attrs.target ?? "_blank"}>{next(node.children, embeds, fullRenderOptions)}</a>
      )
    }
    return null
  },
  [RTETypeEnum.h1]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
    return <h1 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h1>
  },
  [RTETypeEnum.h2]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
    return <h2 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h2>
  },
  [RTETypeEnum.h3]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
    return <h3 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h3>
  },
  [RTETypeEnum.h4]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
    return <h4 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h4>
  },
  [RTETypeEnum.h5]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
    return <h5 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h5>
  },
  [RTETypeEnum.h6]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
    return <h6 className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</h6>
  },
  [RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
    return <p className={node.attrs["class-name"] ?? ""}>{next(node.children, embeds, fullRenderOptions)}</p>
  },
  [RTETypeEnum.reference]: (node: RTENode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
    if ("attrs" in node) {
      const type = node.attrs.type
      if (type === RTEItemTypeEnum.asset) {
        const image = embeds?.[node?.attrs?.["asset-uid"]]
        if (image.node.__typename === EmbedEnum.SysAsset) {
          const alt = image?.node?.title ?? node.attrs.alt
          return (
            <Image
              alt={alt}
              className={styles.image}
              height={image.node.dimension.height}
              src={image?.node?.url}
              unoptimized
              width={image.node.dimension.width}
            />
          )
        }
      } else {
        return (
          <Link href={node.attrs.href}>
            {next(node.children, embeds, fullRenderOptions)}
          </Link>
        )
      }
    }

    return null
  },

  [RTEMarkType.bold]: (children: React.ReactNode) => {
    return <strong>{children}</strong>
  },
  [RTEMarkType.italic]: (children: React.ReactNode) => {
    return <em>{children}</em>
  },
  [RTEMarkType.underline]: (children: React.ReactNode) => {
    return <u>{children}</u>
  },
  [RTEMarkType.strikethrough]: (children: React.ReactNode) => {
    return <s>{children}</s>
  },
  [RTEMarkType.inlineCode]: (children: React.ReactNode) => {
    return <span>{children}</span>
  },
  [RTEMarkType.subscript]: (children: React.ReactNode) => {
    return <sub>{children}</sub>
  },
  [RTEMarkType.superscript]: (children: React.ReactNode) => {
    return <sup>{children}</sup>
  },
  [RTEMarkType.break]: (children: React.ReactNode) => {
    return (
      <>
        <br />
        {children}
      </>
    )
  },
  [RTEMarkType.classnameOrId]: (children: React.ReactNode, className?: string, id?: string) => {
    let props = {
      className,
      id,
    }
    if (!className) {
      delete props.className
    }
    if (!id) {
      delete props.id
    }
    return <span {...props}>{children}</span>
  }
}