import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { Grid, Hidden, Avatar, Tooltip, Paper, Badge } from "@material-ui/core";
import SearchIcon from "@material-ui/icons/Search";
import { HomeOutlined } from "@material-ui/icons";
import { PlayCircleFilledWhiteOutlined } from "@material-ui/icons";
import { StoreMallDirectoryOutlined } from "@material-ui/icons";
import { SupervisedUserCircleOutlined } from "@material-ui/icons";
import Brightness4Icon from "@material-ui/icons/Brightness4";
import BrightnessHighIcon from "@material-ui/icons/BrightnessHigh";
import NotificationsNoneOutlinedIcon from "@material-ui/icons/NotificationsNoneOutlined";
import ArrowDropDownRoundedIcon from "@material-ui/icons/ArrowDropDownRounded";
import AddIcon from "@material-ui/icons/Add";
import TelegramIcon from "@material-ui/icons/Telegram";
import Zoom from "@material-ui/core/Zoom";
import logo from "../../assets/images/logo.png";
import { ToggleTheme } from "../../store/actions/util";
import { auth } from "../../firebase";
import Style from "./Style";

const Header = () => {
  const classes = Style();
  const dispatch = useDispatch();
  const mode = useSelector((state) => state.util);
  const { photoURL } = useSelector((state) => state.user);

  const changeTheme = () => {
    dispatch(ToggleTheme());
  };

  const logout = () => {
    auth.signOut();
  };

  return (
    <Paper elevation={0} style={{ borderRadius: 0, width: "100%", height: "100%" }}>
      <Grid container className={classes.header}>
        {/*----Logo & Search icon--------*/}
        <Hidden xsDown>
          <Grid item className={classes.header__logo} sm={2} md={3}>
            <img className={classes.logo__image} src={logo} alt="facebook-logo" />
            <Hidden smDown>
              <div className={classes.logo__search}>
                <SearchIcon />
                <input placeholder="Search facebook ..." />
              </div>
            </Hidden>
          </Grid>
        </Hidden>
        {/*----Nav-Bar--------*/}
        <Grid item className={classes.header__nav} xs={12} sm={8} md={6}>
          <div className={`${classes.nav__links} ${classes.nav__links__specail}`}>
            <Avatar src={logo} />
          </div>
          <div className={classes.nav__links}>
            <HomeOutlined />
          </div>
          <div className={classes.nav__links}>
            <PlayCircleFilledWhiteOutlined />
          </div>
          <Hidden xsDown>
            <div className={classes.nav__links}>
              <StoreMallDirectoryOutlined />
            </div>
            <div className={classes.nav__links}>
              <SupervisedUserCircleOutlined />
            </div>
          </Hidden>
          <div className={classes.nav__links} onClick={changeTheme}>
            {mode ? <Brightness4Icon /> : <BrightnessHighIcon />}
          </div>
          <div className={`${classes.nav__links} ${classes.nav__links__specail}`}>
            <Avatar src={photoURL} onClick={logout} />
          </div>
        </Grid>
        {/*----Userinfo and options--------*/}
        <Hidden xsDown>
          <Grid item className={classes.header__userinfo} sm={2} md={3}>
            <Tooltip
              placement="left"
              TransitionComponent={Zoom}
              TransitionProps={{ timeout: 300 }}
              title={"logout"}
              arrow
            >
              <Avatar src={photoURL} onClick={logout} />
            </Tooltip>
            <Hidden smDown>
              <div className={classes.userinfo__options}>
                <AddIcon />
                <TelegramIcon />
                <Badge badgeContent={10} max={9} {...defaultProps} />

                <ArrowDropDownRoundedIcon />
              </div>
            </Hidden>
          </Grid>
        </Hidden>
      </Grid>
    </Paper>
  );
};

const defaultProps = {
  color: "secondary",
  children: <NotificationsNoneOutlinedIcon />,
};

export default Header;