import type { GetStaticProps } from 'next';
import Head from 'next/head';
import NextImage from 'next/image';
import React, { type ReactNode } from 'react';
import { useIntl } from 'react-intl';
import {
  getLayout,
  Heading,
  ImageWidget,
  Link,
  SocialMediaWidget,
  Page,
  PageHeader,
  PageSidebar,
  TocWidget,
  PageBody,
} from '../components';
import { mdxComponents } from '../components/mdx';
import CVContent, { data, meta } from '../content/pages/cv.mdx';
import type { NextPageWithLayout } from '../types';
import { CONFIG } from '../utils/config';
import { PERSONAL_LINKS, ROUTES } from '../utils/constants';
import { getAboutPageGraph, getSchemaFrom } from '../utils/helpers';
import { loadTranslation } from '../utils/helpers/server';
import { useBreadcrumbs, useHeadingsTree } from '../utils/hooks';

const DownloadLink = (chunks: ReactNode) => (
  <Link href={data.file} isDownload>
    {chunks}
  </Link>
);

/**
 * CV page.
 */
const CVPage: NextPageWithLayout = () => {
  const intl = useIntl();
  const { ref, tree } = useHeadingsTree<HTMLDivElement>({ fromLevel: 2 });
  const { dates, intro, seo, title } = meta;
  const { items: breadcrumbItems, schema: breadcrumbSchema } =
    useBreadcrumbs(title);
  const messages = {
    image: {
      caption: intl.formatMessage(
        {
          defaultMessage: '<link>Download the CV in PDF</link>',
          id: 'fN04AJ',
          description: 'CVPage: download CV in PDF text',
        },
        {
          link: DownloadLink,
        }
      ),
      title: intl.formatMessage({
        defaultMessage: 'Others formats',
        description: 'CVPage: cv preview widget title',
        id: 'B9OCyV',
      }),
    },
    socialMedia: {
      github: intl.formatMessage({
        defaultMessage: 'Github profile',
        description: 'CVPage: Github profile link',
        id: 'Jm0a6H',
      }),
      gitlab: intl.formatMessage({
        defaultMessage: 'Gitlab profile',
        description: 'CVPage: Gitlab profile link',
        id: '++U2Hm',
      }),
      linkedin: intl.formatMessage({
        defaultMessage: 'LinkedIn profile',
        description: 'CVPage: LinkedIn profile link',
        id: 'Sm2wCk',
      }),
      title: intl.formatMessage({
        defaultMessage: 'Open-source projects',
        description: 'CVPage: social media widget title',
        id: '+Dre5J',
      }),
    },
    toc: {
      title: intl.formatMessage({
        defaultMessage: 'Table of Contents',
        description: 'PageLayout: table of contents title',
        id: 'eys2uX',
      }),
    },
  };

  const jsonLd = getSchemaFrom([
    getAboutPageGraph({
      breadcrumb: breadcrumbSchema,
      copyrightYear: new Date(dates.publication).getFullYear(),
      cover: data.image.src,
      dates,
      description: intro,
      slug: ROUTES.CV,
      title,
    }),
  ]);

  const page = {
    title: `${seo.title} - ${CONFIG.name}`,
    url: `${CONFIG.url}${ROUTES.CV}`,
  };

  return (
    <Page breadcrumbs={breadcrumbItems} isBodyLastChild>
      <Head>
        <title>{page.title}</title>
        {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */}
        <meta name="description" content={seo.description} />
        <meta property="og:url" content={page.url} />
        {/*eslint-disable-next-line react/jsx-no-literals -- Content allowed */}
        <meta property="og:type" content="article" />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={intro} />
        <meta property="og:image" content={data.image.src} />
        <meta property="og:image:alt" content={title} />
        <script
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
          type="application/ld+json"
        />
      </Head>
      <PageHeader
        heading={title}
        intro={intro}
        meta={{
          publicationDate: dates.publication,
          updateDate: dates.update,
        }}
      />
      <PageSidebar>
        <TocWidget
          heading={<Heading level={3}>{messages.toc.title}</Heading>}
          tree={tree}
        />
      </PageSidebar>
      <PageBody ref={ref}>
        <CVContent components={mdxComponents} />
      </PageBody>
      <PageSidebar>
        <ImageWidget
          description={messages.image.caption}
          heading={
            <Heading isFake level={3}>
              {messages.image.title}
            </Heading>
          }
          img={<NextImage {...data.image} />}
        />
        <SocialMediaWidget
          heading={
            <Heading isFake level={3}>
              {messages.socialMedia.title}
            </Heading>
          }
          media={[
            {
              icon: 'Github',
              id: 'github',
              label: messages.socialMedia.github,
              url: PERSONAL_LINKS.GITHUB,
            },
            {
              icon: 'Gitlab',
              id: 'gitlab',
              label: messages.socialMedia.gitlab,
              url: PERSONAL_LINKS.GITLAB,
            },
          ]}
        />
      </PageSidebar>
    </Page>
  );
};

CVPage.getLayout = (page) => getLayout(page);

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  const translation = await loadTranslation(locale);

  return {
    props: {
      translation,
    },
  };
};

export default CVPage;
='#n70'>70</a>
<a id='n71' href='#n71'>71</a>
<a id='n72' href='#n72'>72</a>
<a id='n73' href='#n73'>73</a>
<a id='n74' href='#n74'>74</a>
<a id='n75' href='#n75'>75</a>
<a id='n76' href='#n76'>76</a>
<a id='n77' href='#n77'>77</a>
<a id='n78' href='#n78'>78</a>
<a id='n79' href='#n79'>79</a>
<a id='n80' href='#n80'>80</a>
<a id='n81' href='#n81'>81</a>
<a id='n82' href='#n82'>82</a>
<a id='n83' href='#n83'>83</a>
<a id='n84' href='#n84'>84</a>
<a id='n85' href='#n85'>85</a>
<a id='n86' href='#n86'>86</a>
<a id='n87' href='#n87'>87</a>
<a id='n88' href='#n88'>88</a>
<a id='n89' href='#n89'>89</a>
<a id='n90' href='#n90'>90</a>
<a id='n91' href='#n91'>91</a>
<a id='n92' href='#n92'>92</a>
<a id='n93' href='#n93'>93</a>
<a id='n94' href='#n94'>94</a>
<a id='n95' href='#n95'>95</a>
<a id='n96' href='#n96'>96</a>
<a id='n97' href='#n97'>97</a>
<a id='n98' href='#n98'>98</a>
<a id='n99' href='#n99'>99</a>
<a id='n100' href='#n100'>100</a>
<a id='n101' href='#n101'>101</a>
<a id='n102' href='#n102'>102</a>
<a id='n103' href='#n103'>103</a>
<a id='n104' href='#n104'>104</a>
<a id='n105' href='#n105'>105</a>
<a id='n106' href='#n106'>106</a>
<a id='n107' href='#n107'>107</a>
<a id='n108' href='#n108'>108</a>
<a id='n109' href='#n109'>109</a>
<a id='n110' href='#n110'>110</a>
<a id='n111' href='#n111'>111</a>
<a id='n112' href='#n112'>112</a>
<a id='n113' href='#n113'>113</a>
<a id='n114' href='#n114'>114</a>
<a id='n115' href='#n115'>115</a>
<a id='n116' href='#n116'>116</a>
<a id='n117' href='#n117'>117</a>
<a id='n118' href='#n118'>118</a>
<a id='n119' href='#n119'>119</a>
<a id='n120' href='#n120'>120</a>
<a id='n121' href='#n121'>121</a>
</pre></td>
<td class='lines'><pre><code>