import React, { Component } from 'react'
import Link from 'gatsby-link'

import Facebook from '../images/facebook.svg'
import Instagram from '../images/instagram.svg'
import Twitter from '../images/twitter.svg'
import LinkedIn from '../images/linkedin.svg'

import './SideMenu.css'
class SideMenu extends Component {
  componentDidMount() {
    var Slideout = require('slideout')

    const slideout = new Slideout({
      panel: document.querySelector('.side-panel'),
      menu: document.querySelector('.side-menu'),
      toggle: document.querySelector('.side-toggle'),
      padding: 0,
      tolerance: 70,
      side: 'right',
    })

    document
      .querySelector('.side-toggle')
      .addEventListener('click', function() {
        slideout.toggle()
      })

    close = () => {
      slideout.close()
    }

    slideout
      .on('beforeopen', function() {
        this.panel.classList.add('panel-open')
      })
      .on('open', function() {
        this.panel.addEventListener('click', close)
        let closeMenu = document.querySelectorAll('.side-close')

        Array.from(closeMenu).forEach(trigger => {
          trigger.addEventListener('click', close)
        })
      })
      .on('beforeclose', function() {
        this.panel.classList.remove('panel-open')
        this.panel.removeEventListener('click', close)
      })
  }

  render() {
    return (
      <div className="side-menu">
        <ul className="m-0 p-0 mt-4 side-navigation">
          <button className="text-white text-2xl m-2 opacity-50 hover:opacity-100 px-2 side-close">
            X
          </button>
          <Link to="/" className="side-close menu-home no-underline">
            <li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
              Home
            </li>
          </Link>
          <Link
            to="/services"
            className="side-close menu-services no-underline"
          >
            <li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
              Services
            </li>
          </Link>
          <Link to="/about" className="side-close menu-about no-underline">
            <li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
              About Us
            </li>
          </Link>
          <Link to="/blog" className="side-close menu-blog no-underline">
            <li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
              Blog
            </li>
          </Link>
          <Link to="/contact" className="side-close menu-contact no-underline">
            <li className="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
              Contact
            </li>
          </Link>
        </ul>
        <div className="absolute pin-b flex social-icons p-8 items-end">
          <div>
            <a href="https://facebook.com/saburly" target="_blank">
              <img
                src={Facebook}
                alt="Facebook Social Media"
                className="w-full p-2 saburly-transition opacity-80 hover:opacity-100"
              />
            </a>
          </div>
          <div>
            <a href="https://instagram.com/saburly" target="_blank">
              <img
                src={Instagram}
                alt="Instagram Social Media"
                className="w-full p-2 saburly-transition opacity-80 hover:opacity-100"
              />
            </a>
          </div>
          <div>
            <a href="https://twitter.com/saburly" target="_blank">
              <img
                src={Twitter}
                alt="Twitter Social Media"
                className="w-full p-2 saburly-transition opacity-80 hover:opacity-100"
              />
            </a>
          </div>
          <div>
            <a href="https://www.linkedin.com/company/saburly/" target="_blank">
              <img
                src={LinkedIn}
                alt="LinkedIn Social Media"
                className="w-full p-2 saburly-transition opacity-80 hover:opacity-100"
              />
            </a>
          </div>
        </div>
      </div>
    )
  }
}

export default SideMenu