import { cx } from 'class-variance-authority'

import { Divider } from '../Divider'
import { MaterialIcon } from '../Icons/MaterialIcon'
import Image from '../Image'
import ImageContainer from '../ImageContainer'
import Link from '../Link'
import Table from '../Table'
import { Typography } from '../Typography'

import {
  extractAvailableListClassNames,
  hasAvailableParagraphFormat,
} from './utils'

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

import {
  DeprecatedImageVaultAssetResponse,
  ImageVaultAssetResponse,
  mapImageVaultAssetResponseToImageVaultAsset,
  mapInsertResponseToImageVaultAsset,
} from '@scandic-hotels/common/utils/imageVault'
import type { EmbedByUid } from './JsonToHtml'
import type { Attributes } from './types/rte/attrs'
import {
  AvailableParagraphFormatEnum,
  RTEItemTypeEnum,
  RTETypeEnum,
} from './types/rte/enums'
import {
  type RTEDefaultNode,
  type RTEImageNode,
  RTEMarkType,
  type RTENext,
  type RTENode,
  type RTERegularNode,
  type RTETextNode,
} from './types/rte/node'
import type { RenderOptions } from './types/rte/option'

function noNestedLinksOrReferences(node: RTENode) {
  if ('type' in node) {
    if (node.type === RTETypeEnum.reference) {
      return node.children
    } else if (node.type === RTETypeEnum.a) {
      return node.children
    }
  }
  return node
}

function extractPossibleAttributes(attrs: Attributes | undefined) {
  if (!attrs) return {}
  const props: Record<string, unknown> & {
    className?: string
    style?: React.CSSProperties | undefined
  } = {}
  if (attrs.id) {
    props.id = attrs.id
  }

  if (attrs.class && typeof attrs.class === 'string') {
    props.className = attrs.class
  } else if (attrs['class-name']) {
    props.className = attrs['class-name']
  } else if (attrs.classname && typeof attrs.classname === 'string') {
    props.className = attrs.classname
  }

  if (attrs.style?.['text-align']) {
    props.style = {
      textAlign: attrs.style['text-align'] as React.CSSProperties['textAlign'],
    }
  }

  return props
}

export const renderOptions: RenderOptions = {
  [RTETypeEnum.a]: (
    node: RTERegularNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    if (!node.attrs.url) {
      return
    }

    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Link
        key={node.uid}
        className={className}
        {...props}
        href={typeof node.attrs.url === 'string' ? node.attrs.url : ''}
        target={
          typeof node.attrs.target === 'string' ? node.attrs.target : '_blank'
        }
        textDecoration="underline"
      >
        {next(
          // Sometimes editors happen to nest a reference inside a link and vice versa.
          // In that case use the outermost link, i.e. ignore nested links.
          node.children.flatMap(noNestedLinksOrReferences),
          embeds,
          fullRenderOptions
        )}
      </Link>
    )
  },

  [RTETypeEnum.blockquote]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/Decorative/lg">
        <blockquote className={cx(styles.blockquote, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </blockquote>
      </Typography>
    )
  },

  [RTETypeEnum.code]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <code key={node.uid} className={cx(styles.code, className)} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </code>
    )
  },

  [RTETypeEnum.embed]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    if (node.attrs.src) {
      props.src = node.attrs.src
    }
    if (node.attrs.url) {
      props.src = node.attrs.url
    }
    if (!props.src) {
      return null
    }
    return (
      <iframe
        key={node.uid}
        className={cx(styles.iframe, className)}
        {...props}
      >
        {next(node.children, embeds, fullRenderOptions)}
      </iframe>
    )
  },

  [RTETypeEnum.h1]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/lg">
        <h1 className={cx(styles.heading, styles.h1, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </h1>
      </Typography>
    )
  },

  [RTETypeEnum.h2]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/md">
        <h2 className={cx(styles.heading, styles.h2, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </h2>
      </Typography>
    )
  },

  [RTETypeEnum.h3]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/sm">
        <h3 className={cx(styles.heading, styles.h3, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </h3>
      </Typography>
    )
  },

  [RTETypeEnum.h4]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/xs">
        <h4 className={cx(styles.heading, styles.h4, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </h4>
      </Typography>
    )
  },

  [RTETypeEnum.h5]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/xs">
        <h5 className={cx(styles.heading, styles.h5, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </h5>
      </Typography>
    )
  },

  [RTETypeEnum.hr]: () => {
    return <Divider className={styles.divider} color="burgundy" />
  },

  [RTETypeEnum.li]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    const compatibleClassNames = extractAvailableListClassNames(className)
    return (
      <li
        key={node.uid}
        {...props}
        className={cx(styles.li, compatibleClassNames)}
      >
        <div>{next(node.children, embeds, fullRenderOptions)}</div>
      </li>
    )
  },

  [RTETypeEnum.ol]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    const compatibleClassNames = extractAvailableListClassNames(className)

    return (
      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
        <ol className={cx(styles.ol, compatibleClassNames)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </ol>
      </Typography>
    )
  },

  [RTETypeEnum.p]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)

    const hasFormat = node.children.some((item) =>
      hasAvailableParagraphFormat((item as RTETextNode)?.classname)
    )

    // If a child node has an available format as className, we wrap it in a
    // span and render the children with the correct component
    if (hasFormat) {
      return next(node.children, embeds, fullRenderOptions)
    }

    return (
      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
        <p className={cx(styles.p, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </p>
      </Typography>
    )
  },

  [RTETypeEnum.span]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    let propsClassName = className

    if (className) {
      const availableClassNames = extractAvailableListClassNames(className)
      if (availableClassNames.length) {
        propsClassName = cx(availableClassNames)
      }
    }

    return (
      <span className={propsClassName} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </span>
    )
  },
  [RTETypeEnum.div]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    let propsClassName = className

    if (className) {
      const availableClassNames = extractAvailableListClassNames(className)
      if (availableClassNames.length) {
        propsClassName = cx(availableClassNames)
      }
    }

    return (
      <div className={cx(styles.div, propsClassName)} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </div>
    )
  },

  [RTETypeEnum.reference]: (
    node: RTENode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    if (!('attrs' in node)) {
      return null
    }

    const type = node.attrs.type
    if (type === RTEItemTypeEnum.asset) {
      const imageTypeRegex = /^image\//
      const isImage = imageTypeRegex.test(node.attrs['asset-type'] as string)
      if (isImage) {
        const image = embeds?.[node?.attrs?.['asset-uid'] as string]
        if (image?.node.__typename === 'SysAsset') {
          if (image.node.url) {
            const alt = image?.node?.title ?? node.attrs.alt
            const { className, ...props } = extractPossibleAttributes(
              node.attrs
            )
            return (
              <div key={node.uid} className={styles.imageWrapper}>
                <Image
                  className={cx(styles.image, className)}
                  src={image.node.url}
                  alt={alt as string}
                  fill
                  sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
                  {...props}
                />
              </div>
            )
          }
        }
      } else if (node.attrs['display-type'] === 'link' && node.attrs.href) {
        const { className, ...props } = extractPossibleAttributes(node.attrs)
        return (
          <Link
            key={node.uid}
            className={className}
            href={node.attrs.href as string}
            textDecoration="underline"
            target="_blank"
            variant="icon"
            {...props}
          >
            {next(
              // Sometimes editors happen to nest a reference inside a link and vice versa.
              // In that case use the outermost link, i.e. ignore nested links.
              node.children.flatMap(noNestedLinksOrReferences),
              embeds,
              fullRenderOptions
            )}
            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
          </Link>
        )
      }
    }

    if (type === RTEItemTypeEnum.entry) {
      const entry = embeds?.[node?.attrs?.['entry-uid'] as string]

      if (entry?.node.__typename === 'ImageContainer') {
        if (entry.node.image_left && entry.node.image_right) {
          return (
            <ImageContainer
              key={node.uid}
              leftImage={entry.node.image_left}
              rightImage={entry.node.image_right}
            />
          )
        }
        return null
      } else if (
        entry?.node.__typename === 'AccountPage' ||
        entry?.node.__typename === 'CampaignOverviewPage' ||
        entry?.node.__typename === 'CampaignPage' ||
        entry?.node.__typename === 'CollectionPage' ||
        entry?.node.__typename === 'ContentPage' ||
        entry?.node.__typename === 'DestinationCityPage' ||
        entry?.node.__typename === 'DestinationCountryPage' ||
        entry?.node.__typename === 'DestinationOverviewPage' ||
        entry?.node.__typename === 'HotelPage' ||
        entry?.node.__typename === 'LoyaltyPage' ||
        entry?.node.__typename === 'StartPage'
      ) {
        // If entry is not an ImageContainer, it is a page and we return it as a link
        const { className, ...props } = extractPossibleAttributes(node.attrs)
        const entryHref = entry.node.url

        const nodeHref = node.attrs?.locale
          ? `/${node.attrs.locale}${node.attrs.href ?? node.attrs.url}`
          : ((node.attrs.href ?? node.attrs.url) as string)

        if (!entryHref && !nodeHref) {
          return null
        }

        return (
          <Link
            key={node.uid}
            className={className}
            {...props}
            href={entryHref ?? nodeHref}
            textDecoration="underline"
          >
            {next(
              // Sometimes editors happen to nest a reference inside a link and vice versa.
              // In that case use the outermost link, i.e. ignore nested links.
              node.children.flatMap(noNestedLinksOrReferences),
              embeds,
              fullRenderOptions
            )}
          </Link>
        )
      }
    }
  },

  [RTETypeEnum.ImageVault]: (node: RTEImageNode) => {
    const type = node.type
    if (!('attrs' in node) || type !== RTETypeEnum.ImageVault) {
      return null
    }

    let image = undefined
    if ('imageVaultId' in node.attrs && 'fileName' in node.attrs) {
      image = mapImageVaultAssetResponseToImageVaultAsset(
        node.attrs as unknown as ImageVaultAssetResponse
      )
    }

    if ('Name' in node.attrs && 'Id' in node.attrs) {
      image = mapInsertResponseToImageVaultAsset(
        node.attrs as unknown as DeprecatedImageVaultAssetResponse
      )
    }

    if (!image) {
      return null
    }

    const alt = image.meta.alt ?? image.title
    const caption = image.meta.caption
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <div key={node.uid} className={styles.imageWithCaption}>
        <div className={styles.imageWrapper}>
          <Image
            alt={alt}
            className={cx(styles.image, className)}
            src={image.url}
            fill
            sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
            focalPoint={image.focalPoint}
            dimensions={image.dimensions}
            {...props}
          />
        </div>
        {caption ? (
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p>{image.meta.caption}</p>
          </Typography>
        ) : null}
      </div>
    )
  },

  [RTETypeEnum.table]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <div key={node.uid} className={styles.tableContainer}>
        <Table className={cx(styles.table, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </Table>
      </div>
    )
  },

  [RTETypeEnum.thead]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    // Override the styling of p tags inside the thead tag
    const theadChildPRenderOptions = {
      ...fullRenderOptions,
      [RTETypeEnum.p]: (
        node: RTEDefaultNode,
        embeds: EmbedByUid,
        next: RTENext,
        fullRenderOptions: RenderOptions
      ) => (
        <Typography variant="Body/Paragraph/mdBold">
          <span className={styles.theadContent}>
            {next(node.children, embeds, fullRenderOptions)}
          </span>
        </Typography>
      ),
    }
    const props = extractPossibleAttributes(node.attrs)
    return (
      <Table.THead key={node.uid} {...props}>
        {next(node.children, embeds, theadChildPRenderOptions)}
      </Table.THead>
    )
  },

  [RTETypeEnum.tbody]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
      <Table.TBody key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </Table.TBody>
    )
  },

  [RTETypeEnum.tfoot]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
      <tfoot key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </tfoot>
    )
  },

  [RTETypeEnum.fragment]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    return <>{next(node.children, embeds, fullRenderOptions)}</>
  },

  [RTETypeEnum.tr]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
      <Table.TR key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </Table.TR>
    )
  },

  [RTETypeEnum.th]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
      <Table.TH key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </Table.TH>
    )
  },

  [RTETypeEnum.td]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
      <Table.TD key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </Table.TD>
    )
  },

  [RTETypeEnum.ul]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    const compatibleClassNames = extractAvailableListClassNames(className)

    return (
      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
        <ul className={cx(styles.ul, compatibleClassNames)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </ul>
      </Typography>
    )
  },

  /** TextNode wrappers */
  [RTEMarkType.bold]: (children: React.ReactNode) => {
    return (
      <Typography variant="Body/Paragraph/mdBold">
        <strong>{children}</strong>
      </Typography>
    )
  },

  [RTEMarkType.italic]: (children: React.ReactNode) => {
    return <em>{children}</em>
  },

  [RTEMarkType.underline]: (children: React.ReactNode) => {
    return (
      <Typography variant="Link/md">
        <u>{children}</u>
      </Typography>
    )
  },

  [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
  ) => {
    const props = { id }
    let propsClassName = className

    if (!id) {
      delete props.id
    }

    if (className) {
      const availableClassNames = extractAvailableListClassNames(className)
      if (availableClassNames.length) {
        propsClassName = cx(availableClassNames)
      }
    }

    if (className === AvailableParagraphFormatEnum.footnote) {
      return (
        <Typography key={id} variant="Label/xsRegular">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum.caption) {
      return (
        <Typography key={id} variant="Body/Supporting text (caption)/smRegular">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum['script-1']) {
      return (
        <Typography key={id} variant="Title/Decorative/lg">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum['script-2']) {
      return (
        <Typography key={id} variant="Title/Decorative/md">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum['subtitle-1']) {
      return (
        <Typography key={id} variant="Title/Subtitle/lg">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }
    if (className === AvailableParagraphFormatEnum['subtitle-2']) {
      return (
        <Typography key={id} variant="Title/Subtitle/md">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }
    return (
      <Typography key={id} variant="Body/Paragraph/mdRegular">
        <span className={propsClassName} {...props}>
          {children}
        </span>
      </Typography>
    )
  },

  /**
   * Contentstack can return something called `default` as seen here in their
   * own SDK (https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/options/default-node-options.ts#L89)
   */
  default: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    return next(node.children, embeds, fullRenderOptions)
  },
}