import { GuidesThumbnail } from '@/components/guides-thumbnail';
import { MDXProvider } from '@mdx-js/react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { AutolinkedHeading } from '../components/autolinked-heading';
import { CodeElement } from '../components/code-element';
import { GlobalStyles } from '../components/global-styles';
import { Header } from '../components/header';
import { PreElement } from '../components/pre-element';
import { SharingButtons } from '../components/sharing-buttons';
import styles from './guide.module.css';
import { ILayoutProps } from './layout';

/* eslint-disable react/display-name */

export default function GuidesPage({ children, frontMatter }: ILayoutProps) {
  const router = useRouter();

  if (router.query.thumb) {
    return <GuidesThumbnail frontMatter={frontMatter} />;
  }

  const ogImage =
    frontMatter.ogImage ??
    `https://thumbs.wokwi.com/api/render.png?service=goodarduinocode&path=${encodeURIComponent(
      router.pathname,
    )}?thumb=1`;

  return (
    <MDXProvider
      components={{
        pre: PreElement,
        code: CodeElement,
        h1: (props) => <AutolinkedHeading size="h1" {...props} />,
        h2: (props) => <AutolinkedHeading size="h2" {...props} />,
        h3: (props) => <AutolinkedHeading size="h3" {...props} />,
        h4: (props) => <AutolinkedHeading size="h4" {...props} />,
        h5: (props) => <AutolinkedHeading size="h5" {...props} />,
        h6: (props) => <AutolinkedHeading size="h6" {...props} />,
      }}
    >
      <Head>
        <title>{frontMatter.title}</title>
        <meta name="description" content={frontMatter.description || ''} />
        <meta property="og:site_name" content="Good Arduino Code" />
        <meta property="og:title" content={frontMatter.title} />
        <meta property="og:description" content={frontMatter.description || ''} />
        <meta property="og:image" content={ogImage} />
        <meta property="og:image:type" content="image/png" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta property="article:publisher" content="https://www.facebook.com/Wokwi" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@WokwiMakes" />
      </Head>
      <GlobalStyles />
      <Header />
      <article className={styles.guide}>
        <h1>{frontMatter.title}</h1>
        <div className={styles.topBar}>
          {frontMatter.readingTime.text}
          <SharingButtons />
        </div>
        {children}
        <SharingButtons />
      </article>
    </MDXProvider>
  );
}