/*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 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/honda.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="/honda/home">
                    <Button color="transparent" className={classes.navLink}>
                        <img
                            src={Logo}
                            width="210px"
                        />
                    </Button>
                </Link>
            </ListItem>
            <ListItem className={classes.listItem}>
                <Link href="/honda/home">
                    <Button
                        color="transparent"
                        className={classes.navLink}
                        style={{ marginTop: "10px" }}
                    >
                        <Icon className={classes.icons}>home</Icon> Home
                    </Button>
                </Link>
            </ListItem>
            <ListItem className={classes.listItem}>
                <Link href="/honda/product/product">
                    <Button
                        color="transparent"
                        className={classes.navLink}
                        style={{ marginTop: "10px" }}
                    >
                        <Icon className={classes.icons}>home</Icon> Product
                    </Button>
                </Link>
            </ListItem>
            {/* <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
            <CustomDropdown
            noLiPadding
            navDropdown
            buttonText="Product"
            buttonProps={{
                className: classes.navLink,
                color: "transparent",
            }}
            buttonIcon={Apps}
            dropdownList={[
                <Link href="/honda/product/product">
                <a className={classes.dropdownLink}>Motor</a>
                </Link>,
                <Link href="/honda/product/ygp">
                <a className={classes.dropdownLink}>YGP</a>
                </Link>,
                <Link href="/honda/product/yamalube">
                <a className={classes.dropdownLink}>Yamalube</a>
                </Link>,
                <Link href="/honda/product/helmet">
                <a className={classes.dropdownLink}>Helmet</a>
                </Link>,
                <Link href="/honda/product/apparel">
                <a className={classes.dropdownLink}>Apparel</a>
                </Link>,
                <Link href="/honda/product/accessories">
                <a className={classes.dropdownLink}>Accessories</a>
                </Link>,
                <Link href="https://booking.thamrin.co.id/">
                <a className={classes.dropdownLink}>Service</a>
                </Link>,
                <Link href="/honda/dealers">
                <a className={classes.dropdownLink}>Dealers</a>
            </Link>,
            ]}
            />
        </ListItem> */}
            <ListItem
                className={classes.listItem}
                style={{ marginTop: "10px" }}
            >
                <Link href="/honda/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="/honda/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={[
                        <Link href="https://www.honda-motor.co.id/">
                            <a className={classes.dropdownLink}>honda</a>
                        </Link>,
                        <Link href="https://www.honda.co.id/">
                            <a className={classes.dropdownLink}>Suzuki</a>
                        </Link>,
                        <Link href="https://www.honda-indonesia.com/">
                            <a className={classes.dropdownLink}>Honda</a>
                        </Link>,
                        <Link href="https://www.hino.co.id/">
                            <a className={classes.dropdownLink}>Hino</a>
                        </Link>,
                        <Link href="https://www.mercedes-benz.co.id/passengercars.html">
                            <a className={classes.dropdownLink}>
                                Mercedes-Benz
                            </a>
                        </Link>,
                        <Link href="http://bprberkatsejati.com/">
                            <a className={classes.dropdownLink}>
                                BPR Berkat Sejati
                            </a>
                        </Link>,
                        <Link href="https://www.hino.co.id/">
                            <a className={classes.dropdownLink}>
                                Palembang Indah Mall
                            </a>
                        </Link>,
                        <Link href="http://www.emilia-hotel.com/">
                            <a className={classes.dropdownLink}>Hotel Emilia</a>
                        </Link>,
                        <Link href="http://homes.thamrin.xyz/">
                            <a className={classes.dropdownLink}>Thamrin Home</a>
                        </Link>,
                        <Link href="https://www.hino.co.id/">
                            <a className={classes.dropdownLink}>Ketty Resto</a>
                        </Link>,
                    ]}
                />
            </ListItem> */}
            <ListItem
                className={classes.listItem}
                style={{ marginTop: "10px" }}
            >
                <Button
                    href="/honda/about_us/about_us"
                    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="/honda/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="/chart"
                    color="transparent"
                    className={classes.navLink}
                >
                    <Chart className={classes.icons} />
                </Button>
            </ListItem> */}
            <ListItem
                className={classes.listItem}
                style={{ marginTop: "10px" }}
            >
                {!username || username == "" ? (
                    <Button
                        href="/honda/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: "SUZUKI" }),
                                    }).then((res) => {
                                        //if (res.ok) {
                                        window.location.href = "../honda/home";
                                        /*}
                                        else{

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