import * as React from "react";
import { Link } from "react-router-dom";
import "./Header.scss";
import NavbarDropdownLink from "../NavbarDropdownLink/NavbarDropdownLink";
import NavbarChildLink from "../NavbarChildLink/NavbarChildLink";
import Navigation from "../Navigation";
import * as TitleImage from "../../assets/img/SIK_RGB_W_side.png";

export interface HeaderProps { }
export interface HeaderState {
  mobileMenuOpen: boolean;
}

class Header extends React.Component<HeaderProps, HeaderState> {
  constructor(props) {
    super(props);
    this.state = {
      mobileMenuOpen: false,
    };
  }

  renderNavigationDesktopItems = () => {
    return (
      <React.Fragment>
        <NavbarDropdownLink to="/kilta" text="Kilta ›">
          <NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
          <NavbarChildLink to="/kilta/fuksi">Fuksi</NavbarChildLink>
          <NavbarChildLink to="/kilta/arkisto">Arkisto</NavbarChildLink>
        </NavbarDropdownLink>
        <NavbarDropdownLink to="/opinnot_ja_ura" text="Opinnot ja ura"></NavbarDropdownLink>
        <NavbarDropdownLink to="/yritysyhteistyo" text="Yritysyhteistyö"></NavbarDropdownLink>
        <NavbarDropdownLink to="/yhteystiedot" text="Yhteystiedot">
          {/* <NavbarChildLink to="https://en.wikipedia.org/wiki/Gay">Simo Höglund</NavbarChildLink> */}
        </NavbarDropdownLink>
        <NavbarDropdownLink to="/in_english" text="In English"></NavbarDropdownLink>
      </React.Fragment>
    );
  }

  renderNavigationMobileItems = () => {
    return (
      <React.Fragment>
        <NavbarDropdownLink to="/kilta" text="Kilta ›" exploded>
          <NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
          <NavbarChildLink to="/kilta/fuksi">Fuksi</NavbarChildLink>
          <NavbarChildLink to="/kilta/arkisto">Arkisto</NavbarChildLink>
        </NavbarDropdownLink>
        <NavbarDropdownLink to="/opinnot_ja_ura" text="Opinnot ja ura" exploded />
        <NavbarDropdownLink to="/yritysyhteistyo" text="Yritysyhteistyö" exploded />
        <NavbarDropdownLink to="/yhteystiedot" text="Yhteystiedot" exploded>
          {/* <NavbarChildLink to="https://en.wikipedia.org/wiki/Gay">Simo Höglund</NavbarChildLink> */}
        </NavbarDropdownLink>
        <NavbarDropdownLink to="/in_english" text="In English" exploded />
      </React.Fragment>
    );
  }

  handleMobileMenuClick = (): void => {
    this.setState(prevState => ({
      mobileMenuOpen: !prevState.mobileMenuOpen,
    }));
  }

  render() {
    const desktopItems = this.renderNavigationDesktopItems();
    const mobileItems = this.renderNavigationMobileItems();
    const { mobileMenuOpen } = this.state;

    return (
      <React.Fragment>
        <div className="header">
          <Link to="/">
            <img className="logo" src={TitleImage} />
          </Link>
          <Navigation
            onMobileMenuOpen={this.handleMobileMenuClick}
            items={desktopItems}
          />
        </div>
        <div className="navigation-mobile-menu" hidden={!mobileMenuOpen}>
          {mobileItems}
        </div>
      </React.Fragment>
    );
  }
}

export default Header;