// Base layout
import Layout from "./components/Layout"

// React Router etc.
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router'

// i18n
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';

// Next.js
import Link from 'next/link'

// Custom pages
import Minecraft from './components/Minecraft'

// Font Awesome
import { faMap, faCopy } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

// React Markdown
import ReactMarkdown from "react-markdown"
import gfm from 'remark-gfm';
import ja from '../docs/minecraft/ja.md'
import en from '../docs/minecraft/en.md'

// next-seo
import { NextSeo } from 'next-seo';

export default function About(props) {
    const { t } = useTranslation();
    const [query] = useLanguageQuery();
  
    // Copy server address to clipboard
    const copyText = () => {
      navigator.clipboard.writeText("yude.jp");
    };

    if (!query) {
      return <p>Loading...</p>
    } else {
    return (
          <>
            <NextSeo
              title="yude.jp Minecraft マルチプレイ"
              description="yude.jp 上に設置されている Minecraft: Java Edition のマルチプレイサーバーについて"
            />
            <Layout title={t('title')}>
            
            <div>
                <p className="my-2 text-3xl text-center">{t('title')}</p>
                <div className="w-full">
                <img
                    src         = "/images/dynmap.png"
                    alt         = "Minecraft brief world map generated by Dynmap"
                    width       = {1354}
                    height      = {619}
                />
                </div>
                
                <div className="text-center">
                <Minecraft />
                <p>
                  <span>{t('address')}: <code>yude.jp</code></span>
                  <button
                    className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-2 py-2 ml-2 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
                    type="button"
                    onClick={() => copyText()}
                  >
                    <FontAwesomeIcon icon={faCopy} className="w-5 h-5 inline"/>
                  </button>
                </p>
                
                <p>{t('version')}: 1.18.1</p>
                
                <Link href="https://bluemap.yude.jp">
                  <a>
                    <button
                    className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6  py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1        ease-linear transition-all duration-150"
                    type="button">
                      <FontAwesomeIcon icon={faMap} className="w-5 h-5 inline"/> BlueMap
                    </button>
                  </a>
                 </Link>
              </div>
              
              {/* Load markdown contents */}
                {query["lang"] === 'ja' ? (
                  <ReactMarkdown plugins={[gfm]}>
                      {ja}
                  </ReactMarkdown>
                ) : (
                  <ReactMarkdown plugins={[gfm]}>
                      {en}
                  </ReactMarkdown>
                )}
            </div>
            </Layout>
          </>
        )
      }
}