import * as React from "react"
import PropTypes from "prop-types"

import AppBar from "@mui/material/AppBar"
import Toolbar from "@mui/material/Toolbar"
import Typography from "@mui/material/Typography"
import useScrollTrigger from "@mui/material/useScrollTrigger"
import Slide from "@mui/material/Slide"
import {
  useTheme,
  useMediaQuery,
} from "@material-ui/core"


import Drawer from "./Drawer"
import { NavLink } from "../assets/styles/styled"
import theme from "../assets/styles/myTheme"

const myPalette = theme.palette

function HideOnScroll(props) {
  const { children, window } = props
  const trigger = useScrollTrigger({
    target: window ? window() : undefined,
  })

  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children}
    </Slide>
  )
}

HideOnScroll.propTypes = {
  children: PropTypes.element.isRequired,
  window: PropTypes.func,
}

function Navbar(props) {
  const theme = useTheme()
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"))

  return (
    <HideOnScroll {...props}>
      <AppBar 
        sx={{ 
          backgroundColor: `${myPalette.primary.main} !important`, 
          px: {
            lg: 8,
          },
          color: {
            md: `${myPalette.primary.contrastText} !important`,
            sm: `${myPalette.primary.text} !important`,
          }
        }}>
        <Toolbar>
          <Typography 
            variant="h6"
            component="div"
            sx={{ flexGrow: 1 }}
          >
            Logo
          </Typography>
          {isMobile ? (
            <Drawer />
          ) : (
            <>
              <NavLink href="#">Productos</NavLink>
              <NavLink href="#">Quiénes somos</NavLink>
              <NavLink href="#">Blog</NavLink>
              <NavLink href="#">Clientes</NavLink>
              <NavLink href="#">Contáctanos</NavLink>
            </>
          )}
        </Toolbar>
      </AppBar>
    </HideOnScroll>
  )
}

export default Navbar
