import React from "react"
import classnames from "classnames"
import * as routes from "@config/routes"
import useSmoothScroll from "@libs/useSmoothScroll"
import logo from "@images/logo.svg"
import { HEADER_ID } from "@features/HomePage/components/Header"
import { SECTION_ID as PORTFOLIO_SECTION_ID } from "@features/HomePage/components/Portfolio/Portfolio"
import { SECTION_ID as CONTACT_SECTION_ID } from "@features/HomePage/components/Contact"

import { makeStyles } from "@material-ui/core/styles"
import { AppBar, Toolbar, Container, Link } from "@material-ui/core"
import { Link as GatsbyLink } from "gatsby-theme-material-ui"

function Navbar({ className, ...rest }) {
  const classes = useStyles()
  const handleClickLink = useSmoothScroll()

  return (
    <AppBar
      component="nav"
      position="static"
      {...rest}
      className={classnames(classes.appBar, className)}
    >
      <Container>
        <Toolbar className={classes.toolbar} disableGutters>
          <div className={classes.titleContainer}>
            <GatsbyLink title="Strona główna" color="inherit" to={routes.HOME}>
              <img className={classes.logo} src={logo} alt="logo" />
            </GatsbyLink>
          </div>
          <div className={classes.divider} />
          <div className={classes.linkContainer}>
            <Link
              title="Start"
              color="inherit"
              href={"#" + HEADER_ID}
              onClick={handleClickLink(HEADER_ID)}
            >
              Start
            </Link>
            <Link
              title="Portfolio"
              color="inherit"
              href={"#" + PORTFOLIO_SECTION_ID}
              onClick={handleClickLink(PORTFOLIO_SECTION_ID)}
            >
              Portfolio
            </Link>
            <Link
              title="Contact"
              color="inherit"
              href={"#" + CONTACT_SECTION_ID}
              onClick={handleClickLink(CONTACT_SECTION_ID)}
            >
              Contact
            </Link>
          </div>
        </Toolbar>
      </Container>
    </AppBar>
  )
}

const useStyles = makeStyles(theme => ({
  appBar: {
    backgroundColor: "transparent",
    color: "#fff",
    boxShadow: "none",
  },
  linkContainer: {
    "& > *:not(:last-child)": {
      marginRight: theme.spacing(1.5),
    },
    [theme.breakpoints.down("xs")]: {
      "& > *:not(:last-child)": {
        marginRight: theme.spacing(0.75),
      },
    },
  },
  logo: {
    width: "56px",
    height: "auto",
    [theme.breakpoints.down("xs")]: {
      width: "48px",
    },
  },
  divider: {
    flexGrow: 1,
  },
  link: {
    width: "100%",
  },
  titleContainer: {
    display: "flex",
    alignItems: "center",
    "& > *:not(:last-child)": {
      marginRight: theme.spacing(1),
    },
  },
  toolbar: {
    padding: theme.spacing(2, 0),
    fontSize: "1.25rem",
  },
}))

export default Navbar