import React, { Component } from "react";
import { connect } from "react-redux";
import AddCircleOutlineRoundedIcon from "@material-ui/icons/AddCircleOutlineRounded";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import Avatar from "@material-ui/core/Avatar";

import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import { user } from "~/Redux/actions";

import mobileHome from "~/assets/icons/mobileHome.svg";
import mobileAr from "~/assets/icons/mobileAr.svg";
import qrcode from "~/assets/icons/drawer-qr.png";
import mobileBasket from "~/assets/icons/mobileBasket.svg";
import mobileBlog from "~/assets/icons/mobileBlog.svg";
import mobileMail from "~/assets/icons/mobileMail.svg";
import mobileProfile from "~/assets/icons/mobileProfile.svg";
import mobileDanger from "~/assets/icons/mobileDanger.svg";
import mobileLogout from "~/assets/icons/mobileLogout.svg";
import proxy from "~/Redux/proxy";
import "./NavbarDrawer.scss";
class NavbarDrawer extends Component {
  state = {
    dropdown: false,
  };

  render() {
    const statusx = proxy.status();
    this.links = [
      {
        name: window.t("صفحه اصلی"),
        link: "/",
        icon: <img src={mobileHome} alt={window.t("صفحه اصلی")} />,
        toast: "",
        message: "",
      },
      {
        name: "ورود یا ثبت نام",
        link: "/auth",
        icon: <img src={mobileLogout} alt={window.t("کتاب‌های من")} />,
        toast: "",
        message: "",
      },
      {
        name: window.t("درباره ما"),
        link: "/about",
        icon: <img src={mobileBlog} alt={window.t("کتاب‌های من")} />,
        toast: "",
        message: "",
      },
      {
        name: window.t("فروشگاه"),
        link: "/products",
        icon: <img src={mobileBlog} alt={window.t("کتاب‌های من")} />,
        toast: "",
        message: "",
      },
      {
        name: window.t("سبد خرید"),
        link: "/cart",
        icon: <img src={mobileBlog} alt={window.t("کتاب‌های من")} />,
        toast: "",
        message: "",
      },
      {
        name: "بلاگ",
        link: "/blogs",
        icon: <img src={mobileBlog} alt="بلاگ" />,
        toast: "",
        message: "",
      },
      {
        name: window.t("پشتیبانی"),
        link: "/support",
        icon: <img src={mobileDanger} alt={window.t("پشتیبانی")} />,
        toast: "",
        message: "",
        // onClick: this.props.logout,
      },
    ];
    this.links2 = [
      {
        name: window.t("صفحه اصلی"),
        link: "/",
        icon: <img src={mobileHome} alt={window.t("صفحه اصلی")} />,
        toast: "",
        message: "",
      },
      {
        name: window.t("واقعیت افزوده"),
        link: "/ar",
        icon: <img src={mobileAr} alt={window.t("واقعیت افزوده")} />,
        toast: "",
        message: "",
      },
      {
        name: window.t("بارکد خوان"),
        link: "/qr-scan",
        icon: <img src={qrcode} alt={window.t("بارکد خوان")} />,
        toast: "",
        message: "",
      },
      {
        name: window.t("کتاب‌های من"),
        link: "/mybooks",
        icon: <img src={mobileBlog} alt={window.t("کتاب‌های من")} />,
        toast: "",
        message: "",
      },
      {
        name: window.t("سبد خرید"),
        link: "/cart",
        icon: <img src={mobileBasket} alt={window.t("فروشگاه")} />,
        toast: "",
        message: "",
      },
      {
        name: "بلاگ",
        link: "/blogs",
        icon: <img src={mobileBlog} alt="بلاگ" />,
        toast: "",
        message: "",
      },
      {
        name: window.t("دانوینی‌ها"),
        link: "/",
        icon: <img src={mobileProfile} alt={window.t("دانوینی‌ها")} />,
        toast: window.t("به زودی این بخش فعال می شود"),
        message: "به زودی",
      },
      {
        name: window.t("پشتیبانی"),
        link: "/support",
        icon: <img src={mobileDanger} alt={window.t("پشتیبانی")} />,
        toast: "",
        message: "",
        // onClick: this.props.logout,
      },
      {
        name: window.t("ویرایش مشخصات"),
        link: "/profile",
        icon: <img src={mobileMail} alt={window.t("ویرایش مشخصات")} />,
        toast: "",
        // message: "4 پیام",
      },
      {
        name: window.t("بروز رسانی"),
        link: "/",
        icon: <img src={mobileLogout} alt={window.t("خروج")} />,
        toast: "",
        message: "",
        onClick: () => {
          window.location.reload(true);
        },
      },
      {
        name: window.t("خروج"),
        link: "/auth",
        icon: <img src={mobileLogout} alt={window.t("خروج")} />,
        toast: "",
        message: "",
        onClick: () => {
          this.props.logout({});
        },
      },
    ];
    const { status } = this.props;

    let score = 2;
    return (
      <div className="navbar-drawer d-flex flex-column">
        {statusx ? (
          <div className="navbar-drawer__header d-flex align-items-center">
            <>
              <Avatar
                style={{ width: 60, height: 60 }}
                alt="Remy Sharp"
                src={
                  status.picFileId
                    ? `https://dnvn.ir/api/v1/file/${status.picFileId}`
                    : ""
                }
              />

              <div className="navbar-drawer__header--right d-fex flex-column">
                <h1>{status.firstName + " " + status.lastName}</h1>
              </div>
            </>

            {this.state.dropdown ? (
              <div
                className="navbar-drawer__header--dropdown"
                onClick={() => this.setState({ dropdown: false })}
              >
                {score ? <span>{score} امتیاز</span> : null}
                <KeyboardArrowUpIcon style={{ color: "grey", fontSize: 30 }} />
              </div>
            ) : (
              <div
                className="navbar-drawer__header--dropdown"
                onClick={() => this.setState({ dropdown: true })}
              >
                {score ? <span>{score} امتیاز</span> : null}{" "}
                <KeyboardArrowDownIcon
                  style={{ color: "grey", fontSize: 30 }}
                />
              </div>
            )}
          </div>
        ) : null}
        {this.state.dropdown ? (
          <div className="navbar-drawer__dropdown d-flex flex-column">
            {/* {this.props.users.map((item, i) => (
              <User data={item} key={i} />
            ))} */}
            <Link
              to={"/newProfile"}
              // key={this.props.users.length + 1}
              style={{ color: "#4e4e4e" }}
            >
              <div className="navbar-drawer__bottom--link d-flex">
                <AddCircleOutlineRoundedIcon
                  style={{ fontSize: 30, color: "#777", margin: "0px 8px" }}
                />
                <div>اضافه کردن کاربر </div>
                {/* {item.message && <div class="badge">{item.message}</div>} */}
              </div>
            </Link>
          </div>
        ) : null}
        <div className="navbar-drawer__bottom mt-3">
          {(statusx ? this.links2 : this.links).map((item, key) => (
            <Link
              to={item.link}
              key={key}
              onClick={
                item.onClick ||
                (() => (item.link === "" ? toast.error(item.toast) : null))
              }
            >
              <div className="navbar-drawer__bottom--link d-flex">
                {item.icon}
                <div>{item.name}</div>
                {item.message && <div class="badge">{item.message}</div>}
              </div>
            </Link>
          ))}

          {/* <div className="navbar-drawer__bottom--version d-flex">
            <span>نسخه نرم‌افزار 3.1</span>
          </div> */}
        </div>
      </div>
    );
  }
}

export default connect((state) => ({ status: state.user.status }), {
  logout: user.logout,
})(NavbarDrawer);