import * as React from "react";
import { Menu, Dropdown } from "semantic-ui-react";
import MagaProtect from "../maga-protect";

interface Props {
  items: any;
  onMenuItemClick?: any;
}

const MagaHorizontalMenu = ({ items, onMenuItemClick }: Props) =>
  items.map((firstLevel: any, indexFirstLevel: number) =>
    firstLevel.items ? (
      <MagaProtect
        key={indexFirstLevel}
        roles={firstLevel.roles}
        userRoles={firstLevel.userRoles}
        permissions={firstLevel.permissions}
        userPermissions={firstLevel.userPermissions}
      >
        <Dropdown item text={firstLevel.label}>
          <Dropdown.Menu>
            {firstLevel.items.map(
              (secondLevel: any, indexSecondLevel: number) =>
                secondLevel.items ? (
                  <MagaProtect
                    key={indexSecondLevel}
                    roles={secondLevel.roles}
                    userRoles={secondLevel.userRoles}
                    permissions={secondLevel.permissions}
                    userPermissions={secondLevel.userPermissions}
                  >
                    <Dropdown.Item>
                      <Dropdown text={secondLevel.label}>
                        <Dropdown.Menu>
                          {secondLevel.items.map(
                            (thirdLevel: any, indexThirdLevel: number) => (
                              <MagaProtect
                                key={indexThirdLevel}
                                roles={thirdLevel.roles}
                                userRoles={thirdLevel.userRoles}
                                permissions={thirdLevel.permissions}
                                userPermissions={thirdLevel.userPermissions}
                              >
                                <Dropdown.Item
                                  onClick={() =>
                                    onMenuItemClick(thirdLevel.route)
                                  }
                                >
                                  {thirdLevel.label}
                                </Dropdown.Item>
                              </MagaProtect>
                            )
                          )}
                        </Dropdown.Menu>
                      </Dropdown>
                    </Dropdown.Item>
                  </MagaProtect>
                ) : (
                  <MagaProtect
                    key={indexSecondLevel}
                    roles={secondLevel.roles}
                    userRoles={secondLevel.userRoles}
                    permissions={secondLevel.permissions}
                    userPermissions={secondLevel.userPermissions}
                  >
                    <Dropdown.Item
                      onClick={() => onMenuItemClick(secondLevel.route)}
                    >
                      {secondLevel.label}
                    </Dropdown.Item>
                  </MagaProtect>
                )
            )}
          </Dropdown.Menu>
        </Dropdown>
      </MagaProtect>
    ) : (
      <MagaProtect
        key={indexFirstLevel}
        roles={firstLevel.roles}
        userRoles={firstLevel.userRoles}
        permissions={firstLevel.permissions}
        userPermissions={firstLevel.userPermissions}
      >
        <Menu.Item onClick={() => onMenuItemClick(firstLevel.route)}>
          {firstLevel.label}
        </Menu.Item>
      </MagaProtect>
    )
  );

export default MagaHorizontalMenu;