/**
 * Head Component
 * Used for setting meta data on pages
 */

import React from 'react';
import NextHead from 'next/head';

enum TITLE_POSITION {
  'BEFORE' = 'BEFORE',
  'AFTER' = 'AFTER',
}

enum DEFAULT_PROPS {
  SITE_NAME = 'Kick It California',
  TWITTER_USERNAME = '',
  DEFAULT_DESCRIPTION = '',
  DEFAULT_URL = 'kickitca.org',
  DEFAULT_IMAGE = '',
  DEFAULT_TITLE_DELIMITER = '-',
}

// const DEFAULT_KEYWORDS: string[] = ['key', 'words', 'here'];

interface HeadProps {
  title: string;
  description?: string;
  image?: string;
  keywords?: string[];
  canonical?: string;
  isIndexed?: boolean;
  titleDelimiter?: string;
  titlePosition?: keyof typeof TITLE_POSITION;
  shouldIndex?: string;
}

// const joinKeywords = (keywords: string[] = DEFAULT_KEYWORDS): string => keywords.join(',');

const formatTitle = (
  title = '',
  delimiter: string = DEFAULT_PROPS.DEFAULT_TITLE_DELIMITER,
  titlePosition: keyof typeof TITLE_POSITION = TITLE_POSITION.AFTER
): string => {
  const defaultPosition = `${DEFAULT_PROPS.SITE_NAME} ${title && ` ${delimiter} ${title}`}`;
  switch (titlePosition) {
    case TITLE_POSITION.BEFORE:
      return `${title && `${title} ${delimiter} `} ${DEFAULT_PROPS.SITE_NAME}`;
    case TITLE_POSITION.AFTER:
      return defaultPosition;
    default:
      return defaultPosition;
  }
};

// Get current URL for canonical reference. 
let getHref = "" + DEFAULT_PROPS.DEFAULT_URL;
let getEnHref = "";
if (typeof window !== "undefined") {
  getHref = window.location.href;
  let getEnHrefArr = getHref.split("/");

  // Remove "es" from URL for English hreflang attribute.
  for(let i=0; i<getEnHrefArr.length; i++) {
    if(getEnHrefArr[i] != "es") {
      getEnHref += getEnHrefArr[i] + "/";
    }
  } 
  
}

export const Head: React.FC<HeadProps> = ({
  title,
  description,
  image,
  // keywords,
  canonical = getHref,
  //isIndexed = true,
  titleDelimiter,
  titlePosition,
  shouldIndex
}): JSX.Element => {

  return (
    <NextHead>
      <meta charSet="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
      {shouldIndex === "0" && <meta name="robots" content="noindex" />}   
      <title>{formatTitle(title, titleDelimiter, titlePosition)}</title>
      <meta name="og:title" content={formatTitle(title, titleDelimiter, titlePosition)} />
      <meta name="description" property="og:description" content={description || DEFAULT_PROPS.DEFAULT_DESCRIPTION} />
      <meta name="url" property="og:url" content={canonical || DEFAULT_PROPS.DEFAULT_URL} />
      <meta name="og:image" content={image || DEFAULT_PROPS.DEFAULT_IMAGE} />
      
      <link rel="canonical" href={canonical || DEFAULT_PROPS.DEFAULT_URL} />
      <link rel="alternate" hrefLang="en" href={getEnHref || DEFAULT_PROPS.DEFAULT_URL} />
      <link rel="alternate" hrefLang="es" href={canonical || DEFAULT_PROPS.DEFAULT_URL} />
      <meta property="og:type" content="website" />
      <meta property="og:site_name" content={DEFAULT_PROPS.SITE_NAME} />

      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content={`@${DEFAULT_PROPS.TWITTER_USERNAME}`} />
      <meta name="twitter:creator" content={`@${DEFAULT_PROPS.TWITTER_USERNAME}`} />
      <meta name="facebook-domain-verification" content="m0pal14whotzplczh88gsqu80gvcmn"/>

      
    </NextHead>
  );
}

Head.displayName = 'Head';

export default Head;