import React from "react";
import Helmet from "react-helmet";
import styled, {ThemeProvider} from "styled-components"
import config from "../../data/SiteConfig";
import "./css/index.css";
import "./css/prism-okaidia.css"
import theme from './theme'


export default class MainLayout extends React.Component {
  getLocalTitle() {
    function capitalize(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
    const pathPrefix = config.pathPrefix ? config.pathPrefix : "/";
    const currentPath = this.props.location.pathname
      .replace(pathPrefix, "")
      .replace("/", "");
    let title = "";
    if (currentPath === "") {
      title = "Home";
    } else if (currentPath === "tags/") {
      title = "Tags";
    } else if (currentPath === "categories/") {
      title = "Categories";
    } else if (currentPath === "about/") {
      title = "About";
    } else if (currentPath.includes("posts")) {
      title = "Article";
    } else if (currentPath.includes("tags/")) {
      const tag = currentPath
        .replace("tags/", "")
        .replace("/", "")
        .replace("-", " ");
      title = `Tagged in ${capitalize(tag)}`;
    } else if (currentPath.includes("categories/")) {
      const category = currentPath
        .replace("categories/", "")
        .replace("/", "")
        .replace("-", " ");
      title = `${capitalize(category)}`;
    }
    return title;
  }

  render() {
    const { location, children } = this.props;
    console.log('MainLayout props', location.pathname);
    const isMobile = location.pathname.indexOf('mobile') > 0;
    return (
      <div>
        { isMobile ?
          <Helmet>
            <title>{`${config.siteTitle} |  ${this.getLocalTitle()}`}</title>
            <meta name="description" content={config.siteDescription} />

            <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js" type="text/javascript" />
            <script>{`
              if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                  FastClick.attach(document.body);
                }, false);
              }
              if(!window.Promise) {
                document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
              }
            `}</script>
            <link rel="stylesheet" type="text/css" href="https://gw.alipayobjects.com/os/rmsportal/PpsJtKuQtnBMQVRxaCBc.css" />
          </Helmet>
          :
          <Helmet>
            <title>{`${config.siteTitle} |  ${this.getLocalTitle()}`}</title>
            <meta name="description" content={config.siteDescription} />
          </Helmet>
        }
        <ThemeProvider theme={theme}>
          {children()}
        </ThemeProvider>
      </div>
    );
  }
}