import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import compose from "recompose/compose";
import { withStyles } from "@material-ui/core/styles";
import { connect } from "react-redux";
import { setUser } from "../../actions/user";
import {
  Button,
  Divider,
  IconButton,
  AppBar,
  Toolbar,
  Typography,
  Link
} from "@material-ui/core";

import AccountCircle from "@material-ui/icons/AccountCircle";
import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import MenuIcon from "@material-ui/icons/Menu";
import axios from "axios";

const styles = theme => ({
  root: {
    flexGrow: 1
  },

  menuButton: {
    marginRight: theme.spacing(2)
  },
  title: {
    flexGrow: 1
  }
});

class AppHeader extends Component {
  render() {
    const { classes, userInfo } = this.props;

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton
              edge="start"
              className={classes.menuButton}
              color="inherit"
              aria-label="menu"
              Link
              href="/"
            >
              <img src={require("../../image/icon.png")}></img>
            </IconButton>
            <Typography variant="h6" className={classes.title}></Typography>
            {!userInfo ? (
              [
                <Button color="inherit" Link href="/LoginPage">
                  Login
                </Button>,
                <Button color="inherit" Link href="/RigisterPage">
                  rigister
                </Button>,
                <Button color="inherit" Link href="/RigisterShopPage">
                  rigistershop
                </Button>
              ]
            ) : (
              <div>
                {userInfo.name}

                <Button
                  color="inherit"
                  onClick={() => {
                    localStorage.removeItem("token");
                    this.props.history.push("/");
                    this.props.removeUser();
                  }}
                >
                  Logout
                </Button>
              </div>
            )}
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  userInfo: state.user
})

const mapDispatchToProps = dispatch => {
  return {
    removeUser: () => dispatch(setUser(null)),
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(compose(withStyles(styles), withRouter)(AppHeader));

// Redux
