/* eslint-disable react/no-danger */
import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import LeftNav from '../components/LeftNav';
import 'prismjs/themes/prism-tomorrow.css';
import './page.scss';
import SideBar from '../components/SideBar';
import EditDoc from '../components/EditButton';
import SEO from '../components/seo';
import { Link } from '../../.cache/gatsby-browser-entry';
import SearchInputBox from '../components/SearchInputBox';
import MobileView from '../components/MobileView';
import Footer from '../components/Footer';
import { environment } from '../environment';
import Header from '../components/header';

export default ({ data, pageContext }) => {
  const prev = pageContext.prev
    ? {
        url: `${pageContext.prev.fields.slug}`,
        title: pageContext.prev.frontmatter.title,
      }
    : null;

  const next = pageContext.next
    ? {
        url: `${pageContext.next.fields.slug}`,
        title: pageContext.next.frontmatter.title,
      }
    : null;

  const post = data.markdownRemark;
  let contextualLinks;
  if (post.frontmatter.contextual_links) {
    contextualLinks = <SideBar links={post.frontmatter.contextual_links} />;
  }

  if (environment.isStaging()) {
    post.frontmatter.noindex = true;
  }

  return (
    <Layout>
      <SEO
        title={post.frontmatter.page_title || post.frontmatter.title}
        slug={post.fields.slug}
        canonical={post.frontmatter.canonical}
        metadesc={post.frontmatter.metadesc}
        keywords={post.frontmatter.keywords}
        social_share_summary={post.frontmatter.social_share_summary}
        social_share_desc={post.frontmatter.social_share_desc}
        social_share_image={post.frontmatter.social_share_image}
        noindex={post.frontmatter.noindex}
      />
      <Header />
      <hr />
      {/*<SubNav></SubNav>*/}
      <div className='w-full'>
        <div className='flex items-stretch'>
          <MobileView></MobileView>
          <nav className='w-1/4 max-w-sm bg-gray-50'>
            <LeftNav />
          </nav>
          <div className='flex-auto w-4/5'>
            <div className='flex items-stretch w-full'>
              <main className='w-4/5'>
                <div className='doc-page px-20 py-14'>
                  <h1>{post.frontmatter.title}</h1>
                  <span dangerouslySetInnerHTML={{ __html: post.html }} />
                </div>
              </main>
              <aside className='w-1/5 bg-white'>
                <hr className='d-block lg:hidden' />
                <div className='top-0 top-1 border-l pl-4 py-16 sticky'>
                  <div className='edit-button'>
                    <EditDoc className='items-end btn edit-button-styles flex inline-flex items-center' />
                  </div>
                  {contextualLinks}
                  <div className='float-cta rounded'>
                    <h3 className='cta-title font-semibold'>
                      See how you can release 10x faster.
                    </h3>
                    <a
                      href='/request-demo'
                      target='_blank'
                      className='signup-btn border border-primary_teal_green px-4 py-1.5 base-teal-gradient font-bold text-white rounded'
                    >
                      Book a free demo
                    </a>
                  </div>
                </div>
              </aside>
            </div>
            <div className='pagination_buttons'>
              <div
                className={prev ? 'flex justify-between' : 'overflow-hidden'}
              >
                {prev && (
                  <div className='prev_button'>
                    <Link to={prev.url}>
                      <span>Previous</span>
                      <svg
                        stroke=''
                        fill='#78757a'
                        strokeWidth='0'
                        viewBox='0 0 24 24'
                        className='css-1hyj6ne'
                        height='1.6em'
                        width='1.6em'
                        xmlns='http://www.w3.org/2000/svg'
                      >
                        <path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'></path>
                      </svg>
                      <h3 className='perviousLink'>{prev.title}</h3>
                    </Link>
                  </div>
                )}
                {next && (
                  <div className='next_button'>
                    <Link to={next.url}>
                      <span>Next</span>
                      <svg
                        stroke=''
                        fill='#78757a'
                        strokeWidth='0'
                        viewBox='0 0 24 24'
                        className='css-jmo9lw'
                        height='1.6em'
                        width='1.6em'
                        xmlns='http://www.w3.org/2000/svg'
                      >
                        <path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'></path>
                      </svg>
                      <h3 className='next_link'>{next.title}</h3>
                    </Link>
                  </div>
                )}
              </div>
              <Footer />
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export const query = graphql`
  query ($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        page_title
        metadesc
        canonical
        keywords
        social_share_summary
        social_share_desc
        social_share_image
        noindex
        contextual_links {
          type
          name
          url
        }
      }
      fields {
        slug
      }
    }
  }
`;
/* eslint-enaable */