import PropTypes from 'prop-types'
import Head from 'next/head'

import Navigasyon from './navigasyon'

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
const orgName = process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'
const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`

export default function HeadLayout({
  children,
  imageUrl,
  imageWidth,
  imageHeight,
  imageMime,
  title,
  tab,
  slug,
  summary
}) {
  return (
    <div>
      <Head prefix='website: https://ogp.me/ns/website#'>
        <title>{`${title ? `${siteName} | ${title}` : siteName}`}</title>
        <link rel='canonical' href={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
        <link rel='manifest' href='/manifest.json' />
        <link rel='icon' type='image/x-icon' sizes='32x32' href='/favicon.ico' />
        <link rel='apple-touch-icon' href='/favicon.ico' />
        <meta name='monetization' content='$ilp.uphold.com/q7MFmYWNpwnr' />
        <meta name='application-name' content={siteName} />
        <meta name='twitter:card' content='summary_large_image' />
        <meta name='twitter:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
        <meta name='twitter:title' content={`${title ? title : siteName}`} />
        <meta name='twitter:description' content={`${summary ? summary : process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
        <meta name='twitter:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-192x192.png`}`} />
        <meta name='twitter:creator' content={twitterHandle} />
        <meta name='twitter:site' content={twitterHandle} />
        <meta name='theme-color' content='#303030' />
        <meta name='apple-mobile-web-app-status-bar' content='#303030' />
        <meta charSet='utf-8' />
        <meta name='description' content={`${summary ? summary : process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
        <meta name='author' content={orgName} />
        <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width' />
        <meta property='og:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
        <meta property='og:type' content='website' />
        <meta property='og:site_name' content={`${title ? title : siteName}`} />
        <meta property='og:title' content={`${title ? title : siteName}`} />
        <meta property='og:description' content={`${summary ? summary : process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
        <meta property='og:locale' content='fr_FR' />
        <meta property='og:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-512x512.png`}`} />
        <meta property='og:image:secure_url' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-512x512.png`}`} />
        <meta property='og:image:type' content={imageMime ? imageMime : 'image/png'} />
        <meta property='og:image:width' content={imageWidth ? imageWidth : '512'} />
        <meta property='og:image:height' content={imageHeight ? imageHeight : '512'} />
        <meta property='og:image:alt' content={`${title && imageUrl ? title : `${siteName} Logo`} | ${siteName}`} />
      </Head>
      <Navigasyon selectedTab={tab} />
      {children}
    </div>
  )
}

HeadLayout.propTypes = {
  children: PropTypes.node.isRequired,
  imageUrl: PropTypes.string,
  imageWidth: PropTypes.number,
  imageHeight: PropTypes.number,
  imageMime: PropTypes.string,
  title: PropTypes.string,
  tab: PropTypes.number.isRequired,
  slug: PropTypes.string,
  summary: PropTypes.string
}

HeadLayout.defaultProps = {
  imageUrl: null,
  imageWidth: null,
  imageHeight: null,
  imageMime: null,
  title: null,
  slug: null,
  summary: null
}
