import { Flex } from "reflexbox/styled-components";
import getConfig from "next/config";
import React, { FC } from "react";
import Router from "next/router";
import useMedia from "use-media";
import Link from "next/link";

import { DISALLOW_REGISTRATION } from "../consts";
import { useStoreState } from "../store";
import styled from "styled-components";
import { RowCenterV } from "./Layout";
import { Button } from "./Button";
import ALink from "./ALink";
import { SiteTheme } from "../consts/site-theme";

const { publicRuntimeConfig } = getConfig();

const Li = styled(Flex).attrs({ ml: [12, 24, 32] })`
  a {
    color: inherit;

    :hover {
      color: #2196f3;
    }
  }
`;

const LogoImage = styled.div`
  & > a {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 8px 0 0;
    font-size: 38px;
    font-weight: bold;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease-out;
  }

  @media only screen and (max-width: 980px) {
    a {
        font-size: 28px;
    }

    img {
        width: 50px !important;
    }
  }

  @media only screen and (max-width: 488px) {
    a {
      font-size: 22px;
    }

    img {
        width: 30px !important;
        margin-right: 5px !important;
    }
  }

  img {
    width: 70px;
    max-width: 100%;
    margin-right: 11px;
  }
`;

const Header: FC = () => {
  const { isAuthenticated } = useStoreState(s => s.auth);
  const isMobile = useMedia({ maxWidth: 640 });

  const home = (
      <Li>
        <Link href="/">
          <ALink href="/" title="home" fontSize={[14, 16]}>
            Home
          </ALink>
        </Link>
      </Li>
  )
  const help = (
    <Li>
      <Link href="/help">
        <ALink href="/help" title="help" fontSize={[14, 16]}>
          Help
        </ALink>
      </Link>
    </Li>
  );
  const login = !isAuthenticated && (
    <Li>
      <Link href="/login">
        <ALink
          href="/login"
          title={!DISALLOW_REGISTRATION ? "login / signup" : "login"}
          forButton
        >
          <Button height={[32, 40]}>
            {!DISALLOW_REGISTRATION ? "Log in / Sign up" : "Log in"}
          </Button>
        </ALink>
      </Link>
    </Li>
  );
  const logout = isAuthenticated && (
    <Li>
      <Link href="/logout">
        <ALink href="/logout" title="logout" fontSize={[14, 16]}>
          Log out
        </ALink>
      </Link>
    </Li>
  );
  const settings = isAuthenticated && (
    <Li>
      <Link href="/settings">
        <ALink href="/settings" title="Settings" forButton>
          <Button height={[32, 40]}>Settings</Button>
        </ALink>
      </Link>
    </Li>
  );

  return (
    <Flex
      width={1232}
      maxWidth="100%"
      p={[16, "0 32px"]}
      mb={[32, 0]}
      height={["auto", "auto", 102]}
      margin={["10px 0"]}
      justifyContent="space-between"
      alignItems={["flex-start", "center"]}
    >
      <Flex
        flexDirection={["column", "row"]}
        alignItems={["flex-start", "stretch"]}
      >
        <LogoImage>
          <a
            href="/"
            title="Homepage"
            onClick={e => {
              e.preventDefault();
              if (window.location.pathname !== "/") Router.push("/");
            }}
          >
            <img src={`${SiteTheme.Logo}`} alt="" />
            {publicRuntimeConfig.SITE_NAME}
          </a>
        </LogoImage>

      </Flex>
      <RowCenterV
        m={0}
        p={0}
        justifyContent="flex-end"
        as="ul"
        style={{ listStyle: "none" }}
      >

        {home}
        {logout}
        {help}
        {settings}
        {login}
      </RowCenterV>
    </Flex>
  );
};

export default Header;