/* eslint-disable jsx-a11y/no-redundant-roles */
/* eslint-disable react/display-name */
import React, { Children } from 'react';
import clsx from 'clsx';
import Link from '@theme/Link';
import BrowserOnly from '@docusaurus/BrowserOnly';
import CodeBlock from '@theme/CodeBlock';
import Heading from '@theme/Heading';
import { useQuery } from 'graphql-hooks';
import { Image as DatoImage } from 'react-datocms';
import useBaseUrl from '@docusaurus/useBaseUrl';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Image from '@theme/IdealImage';
import Placeholder from '@theme/Placeholder';
import { Button } from '@theme/Button';
import { Chat, ChatUserText, ChatBotText } from '@theme/Chat';

const Dump = (props) => (
  <pre>
    <code>{JSON.stringify(props, null, 2)}</code>
  </pre>
);

const blockElements = ['p', 'ul', 'ol', 'dl', 'table', 'div', 'figure'];

export default {
  code: (props) => {
    const { children } = props;

    if (typeof children === 'string') {
      if (!children.includes('\n')) {
        return <code {...props} />;
      }

      return <CodeBlock {...props} />;
    }

    return children;
  },
  a: (props) => {
    return <Link {...props} />;
  },
  pre: (props) => <div className="mdx-box mdx-codeblock" {...props} />,
  h1: Heading('h1'),
  h2: Heading('h2'),
  h3: Heading('h3'),
  h4: Heading('h4'),
  h5: Heading('h5'),
  h6: Heading('h6'),
  ul: (props) => <ul {...props} role="list" />,
  ol: (props) => <ol {...props} role="list" />,
  li: ({ children, className, ...restProps }) => {
    const isMulti =
      Children.toArray(children).some(
        (node) =>
          node.props?.originalType &&
          (blockElements.includes(node.props.originalType) || typeof node.props.originalType == 'function'),
      ) && Children.count(children) > 1;
    return (
      <li {...restProps} role="listitem" className={clsx({ multi: isMulti }, className)}>
        {children}
      </li>
    );
  },
  div: ({ className, ...props }) => <div className={clsx('mdx-box', className)} {...props} />,
  figure: ({ className, ...props }) => <figure className={clsx('mdx-box', className)} {...props} />,
  table: ({ className, ...props }) => <table className={clsx('mdx-box', className)} {...props} />, //???
  /*
	docsaurus
	*/
  Dump,
  Placeholder: (props) => (
    <div className="mdx-box">
      <Placeholder {...props} />
    </div>
  ),
  useQuery,
  useBaseUrl,
  Image: (props) => (
    <div className="mdx-box">
      <Image {...props} />
    </div>
  ),
  // CmsImage({ id }) {
  //   return (
  //     <BrowserOnly>
  //       {() => {
  //         const { loading, error, data } = useQuery(`query {
  //             upload(filter: {id: {eq: "${id}"}}) {
  //               responsiveImage {
  //                 width
  //                 webpSrcSet
  //                 title
  //                 srcSet
  //                 src
  //                 sizes
  //                 height
  //                 bgColor
  //                 base64
  //                 aspectRatio
  //                 alt
  //               }
  //             }
  //           }`);
  //         if (loading) return <div className="mdx-box">Loading...</div>; // TODO: make these better
  //         if (error) return <div className="mdx-box">Loading Error</div>; // TODO: make these better
  //         const { alt, title: caption, responsiveImage } = data.upload || {};
  //         return (
  //           <figure className="mdx-box">
  //             <DatoImage data={responsiveImage} alt={alt} />
  //             {caption && <figcaption>{caption}</figcaption>}
  //           </figure>
  //         );
  //       }}
  //     </BrowserOnly>
  //   );
  // },
  Tabs: (props) => (
    <div className="mdx-box">
      <Tabs {...props} />
    </div>
  ),
  TabItem,
  Chat: (props) => (
    <div className="mdx-box">
      <Chat {...props} />
    </div>
  ),
  ChatUserText,
  ChatBotText,
  Button: (props) => (
    <div>
      <Button {...props} />
    </div>
  ),
};