import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

/* eslint-disable no-extra-boolean-cast */
import React, { useState } from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import NewPopover from "../../lab/Popover";
import Avatar from "../../Avatar";
import Badge from "../../Badge";
import Grid from "../../Grid";
import Typography from "../../Typography";
import ChevronRight from "../../Icon/ChevronRight";
import DefaultAvatar from "./Components/DefaultAvatar";
import ManagementPopper from "./Components/ManagementPopover";
import ProgressAvatar from "./Components/ProgressAvatar";
import getClasses from "./styles";
import Skeleton from "../../Skeleton";

var ManagementFooter = function ManagementFooter(props) {
  // IF label !== "" THEN isPremium
  var avatarSrc = props.avatarSrc,
      avatarDefaultName = props.avatarDefaultName,
      accountName = props.accountName,
      color = props.color,
      label = props.label;
  var isSidebarCollapsed = props.isSidebarCollapsed,
      actions = props.actions,
      logoutCopy = props.logoutCopy,
      handleOnClickLogOut = props.handleOnClickLogOut;
  var allAccounts = props.allAccounts,
      allowMultipleAccounts = props.allowMultipleAccounts,
      accountsTitleCopy = props.accountsTitleCopy,
      alert = props.alert;
  var showProgress = props.showProgress,
      onClickProgress = props.onClickProgress,
      percentageDone = props.percentageDone,
      percentageCopy = props.percentageCopy,
      popoverAvatarClassName = props.popoverAvatarClassName;
  var isLoadingShopInfo = props.isLoadingShopInfo;
  var classes = getClasses({
    color: color,
    isSidebarCollapsed: isSidebarCollapsed
  });

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      anchorEl = _useState2[0],
      setAnchorEl = _useState2[1];

  var printAvatar = function printAvatar() {
    /* If label !== "" image will be displayed with a circle */

    /* If label !== "" it will be displayed here when isSidebarCollapsed */
    if (isLoadingShopInfo) return /*#__PURE__*/React.createElement(Skeleton, {
      variant: "circle",
      width: 42,
      height: 42
    });
    var result = null;

    if (avatarSrc !== "") {
      result = /*#__PURE__*/React.createElement(Avatar, {
        src: avatarSrc,
        size: 42,
        label: isSidebarCollapsed ? label : "",
        colorCircle: !showProgress && label !== "",
        className: !isSidebarCollapsed ? classes.accountInfo : "",
        color: color,
        positionLabel: "bottom-center"
      });
    } else {
      result = /*#__PURE__*/React.createElement(DefaultAvatar, {
        name: avatarDefaultName,
        size: 42,
        label: isSidebarCollapsed ? label : "",
        colorCircle: !showProgress && label !== "",
        className: !isSidebarCollapsed ? classes.accountInfo : "",
        color: color
      });
    }

    if (showProgress) {
      result = /*#__PURE__*/React.createElement(ProgressAvatar, {
        onClickProgress: onClickProgress,
        percentageDone: percentageDone,
        percentageCopy: percentageCopy,
        popoverAvatarClassName: popoverAvatarClassName
      }, result);
    }

    if (Object.keys(alert).length > 0) {
      result = /*#__PURE__*/React.createElement(Badge, {
        color: alert.color,
        variant: "dot",
        className: classes.badge
      }, result);
    }

    return result;
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, printAvatar(), /*#__PURE__*/React.createElement(NewPopover, {
    onOpenChange: function onOpenChange() {
      return setAnchorEl(!anchorEl);
    }
  }, /*#__PURE__*/React.createElement(NewPopover.Trigger, {
    className: classes.rootClickable
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, !isSidebarCollapsed && /*#__PURE__*/React.createElement(Grid, {
    container: true,
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 12,
    className: classes.name
  }, isLoadingShopInfo && /*#__PURE__*/React.createElement(Skeleton, {
    variant: "text",
    width: 100,
    height: 20
  }), !isLoadingShopInfo && /*#__PURE__*/React.createElement(Typography, {
    weight: "bold",
    variant: "small",
    className: classes.accountName
  }, accountName), label !== "" && /*#__PURE__*/React.createElement(Typography, {
    color: color,
    weight: "bold",
    variant: "f1-8",
    className: classes.label
  }, label))), /*#__PURE__*/React.createElement(NewPopover.Anchor, null, /*#__PURE__*/React.createElement(ChevronRight, {
    className: classnames(classes.arrow, !!anchorEl ? classes.arrowPosition : ""),
    size: 24
  })))), /*#__PURE__*/React.createElement(NewPopover.Content, {
    className: classes.popoverPosition
  }, /*#__PURE__*/React.createElement(NewPopover.Arrow, null), /*#__PURE__*/React.createElement(ManagementPopper, {
    color: color,
    accountsTitleCopy: accountsTitleCopy,
    allAccounts: allAccounts,
    logOutCopy: logoutCopy,
    handleOnClickLogOut: handleOnClickLogOut,
    actions: actions,
    alert: alert,
    allowMultipleAccounts: allowMultipleAccounts
  }))));
};

ManagementFooter.propTypes = {
  avatarSrc: PropTypes.string,
  avatarDefaultName: PropTypes.string,
  accountName: PropTypes.string,
  color: PropTypes.string,
  label: PropTypes.string,
  isSidebarCollapsed: PropTypes.bool,
  actions: PropTypes.instanceOf(Object),
  logoutCopy: PropTypes.string,
  handleOnClickLogOut: PropTypes.instanceOf(Object),
  allAccounts: PropTypes.instanceOf(Object),
  alert: PropTypes.instanceOf(Object),
  allowMultipleAccounts: PropTypes.bool,
  popoverAvatarClassName: PropTypes.string,
  showProgress: PropTypes.bool
};
ManagementFooter.defaultProps = {
  avatarSrc: "",
  avatarDefaultName: "CL",
  accountName: "My clever account",
  color: "primary",
  label: "",
  isSidebarCollapsed: false,
  actions: null,
  logoutCopy: "",
  handleOnClickLogOut: function handleOnClickLogOut() {},
  allAccounts: {},
  alert: {},
  allowMultipleAccounts: true,
  popoverAvatarClassName: "",
  showProgress: false
};
export default ManagementFooter;