import FeedIcon from '@assets/images/icon-feed.svg';
import { ButtonLink } from '@components/Buttons';
import { ContactIcon } from '@components/Icons';
import Layout from '@components/Layouts/Layout';
import { ResponsiveImage } from '@components/MDX';
import { RecentPosts } from '@components/Widgets';
import HomePageContent from '@content/pages/homepage.mdx';
import { getPublishedPosts } from '@services/graphql/queries';
import styles from '@styles/pages/Home.module.scss';
import { NextPageWithLayout, ResponsiveImageProps } from '@ts/types/app';
import { PostsList } from '@ts/types/blog';
import { settings } from '@utils/config';
import { loadTranslation } from '@utils/helpers/i18n';
import { NestedMDXComponents } from 'mdx/types';
import { GetStaticProps, GetStaticPropsContext } from 'next';
import Head from 'next/head';
import Script from 'next/script';
import type { ReactElement } from 'react';
import { useIntl } from 'react-intl';
import { Graph, WebPage } from 'schema-dts';

type HomePageProps = {
  recentPosts: PostsList;
};

const Home: NextPageWithLayout<HomePageProps> = ({
  recentPosts,
}: {
  recentPosts: PostsList;
}) => {
  const intl = useIntl();

  const CodingLinks = () => {
    return (
      <ul className={styles['links-list']}>
        <li>
          <ButtonLink target="/thematique/developpement-web">
            {intl.formatMessage({
              defaultMessage: 'Web development',
              description: 'HomePage: link to web development thematic',
              id: 'vkF/RP',
            })}
          </ButtonLink>
        </li>
        <li>
          <ButtonLink target="/projets">
            {intl.formatMessage({
              defaultMessage: 'Projects',
              description: 'HomePage: link to projects',
              id: 'N44SOc',
            })}
          </ButtonLink>
        </li>
      </ul>
    );
  };

  const ColdarkRepos = () => {
    return (
      <ul className={styles['links-list']}>
        <li>
          <ButtonLink
            target="https://github.com/ArmandPhilippot/coldark"
            isExternal={true}
          >
            Github
          </ButtonLink>
        </li>
        <li>
          <ButtonLink
            target="https://gitlab.com/ArmandPhilippot/coldark"
            isExternal={true}
          >
            Gitlab
          </ButtonLink>
        </li>
      </ul>
    );
  };

  const LibreLinks = () => {
    return (
      <ul className={styles['links-list']}>
        <li>
          <ButtonLink target="/thematique/libre">
            {intl.formatMessage({
              defaultMessage: 'Free',
              description: 'HomePage: link to free thematic',
              id: 'w8GrOf',
            })}
          </ButtonLink>
        </li>
        <li>
          <ButtonLink target="/thematique/linux">
            {intl.formatMessage({
              defaultMessage: 'Linux',
              description: 'HomePage: link to Linux thematic',
              id: 'jASD7k',
            })}
          </ButtonLink>
        </li>
      </ul>
    );
  };

  const ShaarliLink = () => {
    return (
      <ul className={styles['links-list']}>
        <li>
          <ButtonLink target="https://shaarli.armandphilippot.com/">
            {intl.formatMessage({
              defaultMessage: 'Shaarli',
              description: 'HomePage: link to Shaarli',
              id: 'i5L19t',
            })}
          </ButtonLink>
        </li>
      </ul>
    );
  };

  const MoreLinks = () => {
    return (
      <ul className={styles['links-list']}>
        <li>
          <ButtonLink target="/contact">
            <ContactIcon />
            {intl.formatMessage({
              defaultMessage: 'Contact me',
              description: 'HomePage: contact button text',
              id: 'sO/Iwj',
            })}
          </ButtonLink>
        </li>
        <li>
          <ButtonLink target="/feed">
            <FeedIcon className={styles['icon--feed']} />
            {intl.formatMessage({
              defaultMessage: 'Subscribe',
              description: 'HomePage: RSS feed subscription text',
              id: 'T4YA64',
            })}
          </ButtonLink>
        </li>
      </ul>
    );
  };

  const getRecentPosts = () => {
    return <RecentPosts posts={recentPosts} />;
  };

  const components: NestedMDXComponents = {
    CodingLinks: CodingLinks,
    ColdarkRepos: ColdarkRepos,
    Image: (props: ResponsiveImageProps) => ResponsiveImage({ ...props }),
    LibreLinks: LibreLinks,
    MoreLinks: MoreLinks,
    RecentPosts: getRecentPosts,
    ShaarliLink: ShaarliLink,
  };

  const pageTitle = intl.formatMessage(
    {
      defaultMessage: '{websiteName} | Front-end developer: WordPress/React',
      description: 'HomePage: SEO - Page title',
      id: 'PXp2hv',
    },
    { websiteName: settings.name }
  );
  const pageDescription = intl.formatMessage(
    {
      defaultMessage:
        '{websiteName} is a front-end developer located in France. He codes and he writes mostly about web development and open-source.',
      description: 'HomePage: SEO - Meta description',
      id: 'tMuNTy',
    },
    { websiteName: settings.name }
  );

  const webpageSchema: WebPage = {
    '@id': `${settings.url}/#home`,
    '@type': 'WebPage',
    name: pageTitle,
    description: pageDescription,
    author: { '@id': `${settings.url}/#branding` },
    creator: { '@id': `${s<style>pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */</style><div class="highlight"><pre><span></span>import { Toggle } from &#39;@components/Form&#39;;
import { LocalStorage } from &#39;@services/local-storage&#39;;
import { useEffect, useState } from &#39;react&#39;;
import { useIntl } from &#39;react-intl&#39;;

const ReduceMotion = () =&gt; {
  const intl = useIntl();
  const [isDeactivated, setIsDeactivated] = useState&lt;boolean&gt;(false);

  useEffect(() =&gt; {
    const initialState = LocalStorage.get(&#39;reduced-motion&#39;);
    if (initialState) setIsDeactivated(initialState === &#39;true&#39; ? true : false);
  }, []);

  useEffect(() =&gt; {
    document.documentElement.dataset.reducedMotion = `${isDeactivated}`;
    LocalStorage.set(&#39;reduced-motion&#39;, `${isDeactivated}`);
  }, [isDeactivated]);

  const updateState = () =&gt; {
    setIsDeactivated(!isDeactivated);
  };

  return (
    &lt;Toggle
      id=&quot;reduced-motion&quot;
      label={intl.formatMessage({
        defaultMessage: &#39;Animations:&#39;,
        description: &#39;ReduceMotion: toggle label&#39;,
      })}
      leftChoice={intl.formatMessage({
        defaultMessage: &#39;On&#39;,
        description: &#39;ReduceMotion: toggle on label&#39;,
      })}
      rightChoice={intl.formatMessage({
        defaultMessage: &#39;Off&#39;,
        description: &#39;ReduceMotion: toggle off label&#39;,
      })}
      value={isDeactivated}
      changeHandler={updateState}
    /&gt;
  );
};

export default ReduceMotion;
</pre></div>
</code></pre></td></tr></table>
</div> <!-- class=content -->
<div class='footer'>generated by <a href='https://git.zx2c4.com/cgit/about/'>cgit v1.2.3</a> (<a href='https://git-scm.com/'>git 2.39.1</a>) at 2025-10-31 13:12:44 +0000</div>
</div> <!-- id=cgit -->
</body>
</html>
