import * as React from "react";
import {
  Grid,
  Icon,
  Dropdown,
  Message,
  Menu,
  Label,
  Sidebar,
  Header,
  Button,
  List,
  Portal,
  Segment,
} from "semantic-ui-react";
import Avatar from "react-avatar";
import { Props } from "./models";
import { mountShortName } from "./transformmers";
import MagaVerticalMenu from "../maga-vertical-menu";
import MagaHorizontalMenu from "../maga-horizontal-menu";
import MagaSuperMenu from "../maga-super-menu";
import MagaProtect from "../maga-protect";

function MagaSideNav({
  children,
  system,
  dropdownSideMenu,
  dataUser,
  messages,
  verticalMenu,
  horizontalMenu,
  superMenu,
  onSelectHorizontalMenu,
  onSelectVerticalMenu,
  onSelectDropDown,
  onSelectSuperMenu,
  onSelectLogo,
  onSelectMessage,
  onLogout,
  logo,
}: Props) {
  const [sideBarVisible, setSideBarVisible] = React.useState(false);
  const [portalVisible, setPortalVisible] = React.useState(false);

  const handleShowClick = (sideBarVisible: boolean) => {
    setSideBarVisible(!sideBarVisible);
  };

  const handleOpenPortal = (portalVisible: boolean) => {
    setPortalVisible(!portalVisible);
  };

  return (
    <React.Fragment>
      <Menu secondary={true} fixed="top" className="nav-bar">
        <div className="nav-strip"></div>
        {verticalMenu && (
          <Menu.Item onClick={() => handleShowClick(sideBarVisible)}>
            <Icon name="sidebar" />
          </Menu.Item>
        )}
        <Menu.Item
          onClick={() => onSelectLogo()}
          className={verticalMenu && "nav-logo"}
        >
          {logo && logo}
        </Menu.Item>
        <Menu.Item className="nav-header">
          {system && (
            <Header as="h5">
              {system.name}
              {system.environment.current !== "production" && (
                <Header.Subheader style={{ color: "#ff253a" }}>
                  {system.environment.label}
                </Header.Subheader>
              )}
            </Header>
          )}
        </Menu.Item>
        {horizontalMenu && (
          <MagaHorizontalMenu
            items={horizontalMenu}
            onMenuItemClick={(value: any) => onSelectHorizontalMenu(value)}
          />
        )}
        <Menu.Menu position="right">
          {dropdownSideMenu && (
            <Dropdown
              className="link item"
              text={dropdownSideMenu.active}
              scrolling
            >
              <Dropdown.Menu>
                {dropdownSideMenu.list.map(
                  (item: any, indexDropdownSideMenu: number) => (
                    <MagaProtect
                      key={indexDropdownSideMenu}
                      roles={item.roles}
                      userRoles={item.userRoles}
                      permissions={item.permissions}
                      userPermissions={item.userPermissions}
                    >
                      <Dropdown.Item
                        onClick={() => {
                          onSelectDropDown(item.id);
                        }}
                      >
                        {item.label}
                      </Dropdown.Item>
                    </MagaProtect>
                  )
                )}
              </Dropdown.Menu>
            </Dropdown>
          )}
          {superMenu && superMenu.organizations.length > 0 && (
            <MagaSuperMenu
              items={superMenu}
              trigger={
                <Menu.Item>
                  <Icon name="grid layout" />
                </Menu.Item>
              }
              onMenuItemClick={(value: any) => onSelectSuperMenu(value)}
            />
          )}
          <Menu.Item className="nav-icons-bar">
            <Icon name="help" />
          </Menu.Item>
          <Dropdown
            direction="left"
            item={true}
            simple={true}
            trigger={
              <div>
                <Icon name="bell" />
                <Label circular={true} color="red">
                  {messages ? messages.length : 0}
                </Label>
              </div>
            }
          >
            <Dropdown.Menu>
              {messages && messages.length > 0 ? (
                messages.map((item, index) => (
                  <Message
                    key={index}
                    compact={true}
                    onClick={() => {
                      onSelectMessage(item);
                    }}
                  >
                    <Icon name="mail" className="nav-icon-messages" />
                    <Message.Content>
                      <Message.Header>{item.title}</Message.Header>
                      {item.description}
                    </Message.Content>
                  </Message>
                ))
              ) : (
                <Message icon={true} compact={true}>
                  <Icon name="inbox" className="nav-icon-messages" />
                  <Message.Content>
                    <Message.Header>Caixa vazia</Message.Header>
                    Nenhum mensagem na sua caixa de entrada
                  </Message.Content>
                </Message>
              )}
            </Dropdown.Menu>
          </Dropdown>
          {dataUser.fullName ? (
            <React.Fragment>
              <span>
                <Avatar
                  size="32"
                  round={true}
                  color={"#0086ff"}
                  name={mountShortName(dataUser.fullName)}
                  className="nav-avatar"
                  onClick={() => handleOpenPortal(portalVisible)}
                />
              </span>
              <Portal
                open={portalVisible}
                onClose={() => handleOpenPortal(portalVisible)}
              >
                <Segment
                  style={{
                    right: "0%",
                    position: "fixed",
                    top: "4.5%",
                    zIndex: 1000,
                  }}
                >
                  <Grid relaxed>
                    <Grid.Column width={4}>
                      <Avatar
                        size="50"
                        round={true}
                        color={"#0086ff"}
                        name={mountShortName(dataUser.fullName)}
                      />
                    </Grid.Column>
                    <Grid.Column width={12}>
                      <List relaxed>
                        <List.Item>
                          <List.Icon name="user" />
                          <List.Content>
                            {mountShortName(dataUser.fullName)}
                          </List.Content>
                        </List.Item>
                        <List.Item>
                          <List.Icon name="user outline" />
                          <List.Content>{dataUser.userName}</List.Content>
                        </List.Item>
                        {dataUser.originalBranch && (
                          <List.Item>
                            <List.Icon name="marker" />
                            <List.Content>
                              {dataUser.originalBranch}
                            </List.Content>
                          </List.Item>
                        )}
                        <List.Item>
                          <List.Content>
                            <Button basic fluid onClick={() => onLogout()}>
                              Sair
                            </Button>
                          </List.Content>
                        </List.Item>
                      </List>
                    </Grid.Column>
                  </Grid>
                </Segment>
              </Portal>
            </React.Fragment>
          ) : (
            <Menu.Item onClick={() => onLogout()}>Sair</Menu.Item>
          )}
        </Menu.Menu>
      </Menu>

      <Sidebar.Pushable>
        <Sidebar
          animation="overlay"
          icon="labeled"
          onHide={() => handleShowClick(sideBarVisible)}
          visible={sideBarVisible}
          width="wide"
          className="nav-sidebar"
        >
          {verticalMenu && (
            <MagaVerticalMenu
              items={verticalMenu}
              onMenuItemClick={(value: any) => onSelectVerticalMenu(value)}
            />
          )}
        </Sidebar>
        <Sidebar.Pusher dimmed={sideBarVisible} className="nav-sidebar-pusher">
          <Grid>
            <Grid.Row className="nav-sidebar-pusher-row">
              <Grid.Column className="nav-sidebar-pusher-column">
                {children}
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Sidebar.Pusher>
      </Sidebar.Pushable>
    </React.Fragment>
  );
}

export default MagaSideNav;