/*eslint-disable*/
import React from "react";
import Link from "next/link";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Icon from "@material-ui/core/Icon";
// import People from "@material-ui/core/People";
import Chart from "@material-ui/icons/LocalGroceryStore";

// @material-ui/icons
import { Apps, ShareTwoTone, Person } from "@material-ui/icons";

// core components
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/components/headerLinksStyle.js";

import Logo from "assets/img/yamaha.png";

const useStyles = makeStyles(styles);

export default function HeaderLinks({ username, ...props }) {
  const classes = useStyles();
  return (
    <List className={classes.list}>
      <ListItem className={classes.listItem}>
        <Link href="/yamaha/home">
          <Button color="transparent" className={classes.navLink}>
            <img
              src={Logo}
              width="180px"
            />
          </Button>
        </Link>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Link href="/yamaha/home">
          <Button
            color="transparent"
            className={classes.navLink}
            style={{ marginTop: "10px" }}
          >
            <Icon className={classes.icons}>home</Icon> Home
          </Button>
        </Link>
      </ListItem>
      <ListItem className={classes.listItem} style={{ marginTop: "10px" }}>
        <CustomDropdown
          noLiPadding
          navDropdown
          buttonText="Product"
          buttonProps={{
            className: classes.navLink,
            color: "transparent",
          }}
          buttonIcon={Apps}
          dropdownList={[
            <a href="/yamaha/product/product" className={classes.dropdownLink}>
              Motor
            </a>,
            <a href="/yamaha/product/ygp" className={classes.dropdownLink}>
              YGP
            </a>,
            <a href="/yamaha/product/yamalube" className={classes.dropdownLink}>
              Yamalube
            </a>,
            <a href="/yamaha/product/helmet" className={classes.dropdownLink}>
              Helmet
            </a>,
            <a href="/yamaha/product/apparel" className={classes.dropdownLink}>
              Apparel
            </a>,
            <a
              href="/yamaha/product/accessories"
              className={classes.dropdownLink}
            >
              Accessories
            </a>,
            <a
              href="https://booking.thamrin.co.id/"
              className={classes.dropdownLink}
            >
              Service
            </a>,
            <a href="/yamaha/dealer/dealers" className={classes.dropdownLink}>
              Dealers
            </a>,
          ]}
        />
      </ListItem>
      <ListItem className={classes.listItem} style={{ marginTop: "10px" }}>
        <Link href="/yamaha/latest_news/latestnews">
          <Button color="transparent" className={classes.navLink}>
            <Icon className={classes.icons}>event</Icon> Latest News
          </Button>
        </Link>
      </ListItem>
      <ListItem className={classes.listItem} style={{ marginTop: "10px" }}>
        <Button
          href="/yamaha/carrer/carrer"
          color="transparent"
          className={classes.navLink}
        >
          <Icon className={classes.icons}>wallet_travel</Icon> Career
        </Button>
      </ListItem>
      {/* <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
        <CustomDropdown
          noLiPadding
          navDropdown
          buttonText="Partner"
          buttonProps={{
            className: classes.navLink,
            color: "transparent",
          }}
          buttonIcon={ShareTwoTone}
          dropdownList={[
            <a href="https://www.yamaha-motor.co.id/" className={classes.dropdownLink}>Yamaha</a>,
            <a href="https://www.suzuki.co.id/" className={classes.dropdownLink}>Suzuki</a>,
            <a href="https://www.honda-indonesia.com/" className={classes.dropdownLink}>Honda</a>,
            <a href="https://www.hino.co.id/" className={classes.dropdownLink}>Hino</a>,
            <a href="https://www.mercedes-benz.co.id/passengercars.html" className={classes.dropdownLink}>Mercedes-Benz</a>,
            <a href="http://bprberkatsejati.com/" className={classes.dropdownLink}>BPR Berkat Sejati</a>,
            <a href="https://www.hino.co.id/" className={classes.dropdownLink}>Palembang Indah Mall</a>,
            <a href="http://www.emilia-hotel.com/" className={classes.dropdownLink}>Hotel Emilia</a>,
            <a href="http://homes.thamrin.xyz/" className={classes.dropdownLink}>Thamrin Home</a>,
            <a href="https://www.hino.co.id/" className={classes.dropdownLink}>Ketty Resto</a>,
          ]}
        />
      </ListItem> */}
      <ListItem className={classes.listItem} style={{ marginTop: "10px" }}>
        <Button
          href="/yamaha/abous_us/aboutus"
          color="transparent"
          className={classes.navLink}
        >
          <Icon className={classes.icons}>account_balance</Icon> About Us
        </Button>
      </ListItem>
      <ListItem className={classes.listItem} style={{ marginTop: "10px" }}>
        <Button
          href="/yamaha/profile/profile"
          // href="#"
          color="transparent"
          className={classes.navLink}
        >
          <Icon className={classes.icons}>people</Icon> Profile
        </Button>
      </ListItem>
      {/* <ListItem className={classes.listItem} style={{ marginTop: "10px" }}>
        <Button
          href="/yamaha/order/order"
          color="transparent"
          className={classes.navLink}
        >
          <Chart className={classes.icons} />
        </Button>
      </ListItem> */}
      <ListItem className={classes.listItem} style={{ marginTop: "10px" }}>
        {!username || username == "" ? (
          <Button
            href="/yamaha/login"
            className={classes.registerNavLink}
            color="info"
            round
          >
            <Icon className={classes.icons}>input</Icon> Login
          </Button>
        ) : (
          <CustomDropdown
            noLiPadding
            navDropdown
            buttonText={
              username.length > 12 ? username.substring(0, 9) + ".." : username
            }
            buttonProps={{
              className: classes.navLink,
              color: "transparent",
            }}
            buttonIcon={Person}
            dropdownList={[
              <div
                onClick={async (e) => {
                  e.preventDefault();
                  fetch("/api/auth/logout", {
                    method: "POST",
                    headers: {
                      "Content-Type": "application/json",
                    },
                    body: JSON.stringify({ p: "YAMAHA" }),
                  }).then((res) => {
                    //if (res.ok) {
                    window.location.href = "../yamaha/home";
                    /*}
                                        else{

                                        }*/
                  });
                }}
              >
                <a className={classes.dropdownLink}>
                  <Icon className={classes.icons}>exit_to_app</Icon> Logout
                </a>
              </div>,
              // <a href="/yamaha/profile/profile" className={classes.dropdownLink}>Profile</a>,
            ]}
          />
        )}
      </ListItem>
    </List>
  );
}