import Notice, { NoticeKind } from '@components/atoms/layout/notice';
import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
import ContactForm, {
  ContactFormProps,
} from '@components/organisms/forms/contact-form';
import SocialMedia from '@components/organisms/widgets/social-media';
import PageLayout from '@components/templates/page/page-layout';
import { meta } from '@content/pages/contact.mdx';
import styles from '@styles/pages/contact.module.scss';
import { sendMail } from '@services/graphql/contact';
import { loadTranslation } from '@utils/helpers/i18n';
import useSettings from '@utils/hooks/use-settings';
import { GetStaticProps, NextPage } from 'next';
import Head from 'next/head';
import { useRouter } from 'next/router';
import Script from 'next/script';
import { useState } from 'react';
import { useIntl } from 'react-intl';
import { ContactPage as ContactPageSchema, Graph, WebPage } from 'schema-dts';

const ContactPage: NextPage = () => {
  const { dates, intro, seo, title } = meta;
  const intl = useIntl();
  const homeLabel = intl.formatMessage({
    defaultMessage: 'Home',
    description: 'Breadcrumb: home label',
    id: 'j5k9Fe',
  });
  const breadcrumb: BreadcrumbItem[] = [
    { id: 'home', name: homeLabel, url: '/' },
    { id: 'contact', name: title, url: '/contact' },
  ];

  const socialMediaTitle = intl.formatMessage({
    defaultMessage: 'Find me elsewhere',
    description: 'ContactPage: social media widget title',
    id: 'Qh2CwH',
  });

  const { website } = useSettings();
  const { asPath } = useRouter();
  const pageUrl = `${website.url}${asPath}`;
  const pagePublicationDate = new Date(dates.publication);
  const pageUpdateDate = dates.update ? new Date(dates.update) : undefined;

  const webpageSchema: WebPage = {
    '@id': `${pageUrl}`,
    '@type': 'WebPage',
    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
    name: seo.title,
    description: seo.description,
    reviewedBy: { '@id': `${website.url}/#branding` },
    url: `${pageUrl}`,
    isPartOf: {
      '@id': `${website.url}`,
    },
  };

  const contactSchema: ContactPageSchema = {
    '@id': `${website.url}/#contact`,
    '@type': 'ContactPage',
    name: title,
    description: intro,
    author: { '@id': `${website.url}/#branding` },
    creator: { '@id': `${website.url}/#branding` },
    dateCreated: pagePublicationDate.toISOString(),
    dateModified: pageUpdateDate && pageUpdateDate.toISOString(),
    datePublished: pagePublicationDate.toISOString(),
    editor: { '@id': `${website.url}/#branding` },
    inLanguage: website.locales.default,
    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
    mainEntityOfPage: { '@id': `${pageUrl}` },
  };

  const schemaJsonLd: Graph = {
    '@context': 'https://schema.org',
    '@graph': [webpageSchema, contactSchema],
  };

  const widgets = [
    <SocialMedia
      key="social-media"
      title={socialMediaTitle}
      level={2}
      media={[
        { name: 'Github', url: 'https://github.com/ArmandPhilippot' },
        { name: 'Gitlab', url: 'https://gitlab.com/ArmandPhilippot' },
        {
          name: 'LinkedIn',
          url: 'https://www.linkedin.com/in/armandphilippot',
        },
      ]}
    />,
  ];

  const [status, setStatus] = useState<NoticeKind>('info');
  const [statusMessage, setStatusMessage] = useState<string>('');

  const submitMail: ContactFormProps['sendMail'] = async (data, reset) => {
    const { email, message, name, subject } = data;
    const messageHTML = message.replace(/\r?\n/g, '<br />');
    const body = `Message received from ${name} <${email}> on ${website.url}.<br /><br />${messageHTML}`;
    const replyTo = `${name} <${email}>`;
    const mailData = {
      body,
      clientMutationId: 'contact',
      replyTo,
      subject,
    };
    const { message: mutationMessage, sent } = await sendMail(mailData);

    if (sent) {
      setStatus('success');
      setStatusMessage(
        intl.formatMessage({
          defaultMessage:
            'Thanks. Your message was successfully sent. I will answer it as soon as possible.',
          description: 'Contact: success message',
          id: '3Pipok',
        })
      );
      reset();
    } else {
      const errorPrefix = intl.formatMessage({
        defaultMessage: 'An error occurred:',
        description: 'Contact: error message',
        id: 'TpyFZ6',
      });
      const error = `${errorPrefix} ${mutationMessage}`;
      setStatus('error');
      setStatusMessage(error);
    }
  };

  return (
    <>
      <Head>
        <title>{`${seo.title} - ${website.name}`}</title>
        <meta name="description" content={seo.description} />
        <meta property="og:url" content={`${pageUrl}`} />
        <meta property="og:type" content="article" />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={intro} />
      </Head>
      <Script
        id="schema-contact"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
      />
      <PageLayout
        title="Contact"
        intro={intro}
        breadcrumb={breadcrumb}
        widgets={widgets}
      >
        <ContactForm
          sendMail={submitMail}
          Notice={
            <Notice
              kind={status}
              message={statusMessage}
              className={styles.notice}
            />
          }
        />
      </PageLayout>
    </>
  );
};

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

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

export default ContactPage;
 .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><span class="k">@use</span><span class="w"> </span><span class="s2">&quot;@styles/abstracts/functions&quot;</span><span class="w"> </span><span class="nt">as</span><span class="w"> </span><span class="nt">fun</span><span class="o">;</span>

<span class="nc">.wrapper</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nt">display</span><span class="nd">:</span><span class="w"> </span><span class="nt">flex</span><span class="o">;</span>
<span class="w">  </span><span class="nt">flex-flow</span><span class="nd">:</span><span class="w"> </span><span class="nt">row</span><span class="w"> </span><span class="nt">wrap</span><span class="o">;</span>
<span class="w">  </span><span class="nt">align-items</span><span class="nd">:</span><span class="w"> </span><span class="nt">center</span><span class="o">;</span>
<span class="w">  </span><span class="nt">justify-content</span><span class="nd">:</span><span class="w"> </span><span class="nt">center</span><span class="o">;</span>
<span class="w">  </span><span class="nt">gap</span><span class="nd">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--spacing-2xs</span><span class="o">);</span>
<span class="w">  </span><span class="nt">margin</span><span class="nd">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--spacing-md</span><span class="o">)</span><span class="w"> </span><span class="nt">0</span><span class="o">;</span>
<span class="p">}</span>

<span class="nc">.ball</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nt">width</span><span class="nd">:</span><span class="w"> </span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">8</span><span class="o">);</span>
<span class="w">  </span><span class="nt">height</span><span class="nd">:</span><span class="w"> </span><span class="nt">fun</span><span class="nc">.convert-px</span><span class="o">(</span><span class="nt">8</span><span class="o">);</span>
<span class="w">  </span><span class="nt">background</span><span class="nd">:</span><span class="w"> </span><span class="nt">linear-gradient</span><span class="o">(</span>
<span class="w">    </span><span class="nt">to</span><span class="w"> </span><span class="nt">right</span><span class="o">,</span>
<span class="w">    </span><span class="nt">var</span><span class="o">(</span><span class="nt">--color-primary-light</span><span class="o">)</span><span class="w"> </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span>
<span class="w">    </span><span class="nt">var</span><span class="o">(</span><span class="nt">--color-primary-lighter</span><span class="o">)</span><span class="w"> </span><span class="nt">100</span><span class="err">%</span>
<span class="w">  </span><span class="o">);</span>
<span class="w">  </span><span class="nt">border-radius</span><span class="nd">:</span><span class="w"> </span><span class="nt">50</span><span class="err">%</span><span class="o">;</span>
<span class="w">  </span><span class="nt">animation</span><span class="nd">:</span><span class="w"> </span><span class="nt">spinner</span><span class="w"> </span><span class="nt">1</span><span class="nc">.4s</span><span class="w"> </span><span class="nt">infinite</span><span class="w"> </span><span class="nt">ease-in-out</span><span class="w"> </span><span class="nt">both</span><span class="o">;</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nd">:first-child</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">animation-delay</span><span class="nd">:</span><span class="w"> </span><span class="nt">-0</span><span class="nc">.32s</span><span class="o">;</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="k">&amp;</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2</span><span class="o">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">animation-delay</span><span class="nd">:</span><span class="w"> </span><span class="nt">-0</span><span class="nc">.16s</span><span class="o">;</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>

<span class="nc">.text</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nt">margin-left</span><span class="nd">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--spacing-xs</span><span class="o">);</span>
<span class="w">  </span><span class="nt">color</span><span class="nd">:</span><span class="w"> </span><span class="nt">var</span><span class="o">(</span><span class="nt">--color-primary-darker</span><span class="o">);</span>
<span class="w">  </span><span class="nt">text-align</span><span class="nd">:</span><span class="w"> </span><span class="nt">center</span><span class="o">;</span>
<span class="p">}</span>

<span class="k">@keyframes</span><span class="w"> </span><span class="nt">spinner</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="nt">0</span><span class="err">%</span><span class="o">,</span>
<span class="w">  </span><span class="nt">80</span><span class="err">%</span><span class="o">,</span>
<span class="w">  </span><span class="nt">100</span><span class="err">%</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">transform</span><span class="nd">:</span><span class="w"> </span><span class="nt">scale</span><span class="o">(</span><span class="nt">0</span><span class="o">);</span>
<span class="w">  </span><span class="p">}</span>

<span class="w">  </span><span class="nt">40</span><span class="err">%</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="nt">transform</span><span class="nd">:</span><span class="w"> </span><span class="nt">scale</span><span class="o">(</span><span class="nt">1</span><span class="o">);</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">}</span>
</pre></div>
