/*
 * Copyright 2020 The Backstage Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { useEffect, useState } from 'react';
import {
  Collapse,
  MenuList,
  MenuItem,
  ListItemIcon,
  ListItemText,
  Typography,
  Badge,
} from '@material-ui/core';
import { useNavigationStyles as useStyles } from '../../utils/styles';
import { useConfig, useScroll } from '../../hooks';
import { findAlways } from '../../utils/assert';
import {
  DefaultNavigation,
  NavigationItem,
  getDefaultNavigationItems,
} from '../../utils/navigation';
import { Maybe, Product } from '../../types';

type CostInsightsNavigationProps = {
  alerts: number;
  products: Maybe<Product[]>;
};

const NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => {
  const classes = useStyles();
  const [, setScroll] = useScroll();
  return (
    <MenuItem
      button
      data-testid={`menu-item-${navigation}`}
      className={classes.menuItem}
      onClick={() => setScroll(navigation)}
    >
      <ListItemIcon className={classes.listItemIcon}>{icon}</ListItemIcon>
      <ListItemText
        primary={<Typography className={classes.title}>{title}</Typography>}
      />
    </MenuItem>
  );
};

export const CostInsightsNavigation = React.memo(
  ({ alerts, products }: CostInsightsNavigationProps) => {
    const classes = useStyles();
    const { icons } = useConfig();
    const [isOpen, setOpen] = useState(false);

    const defaultNavigationItems = getDefaultNavigationItems(alerts);
    const productNavigationItems: NavigationItem[] =
      products?.map(product => ({
        title: product.name,
        navigation: product.kind,
        icon: findAlways(icons, i => i.kind === product.kind).component,
      })) ?? [];

    useEffect(
      function toggleProductMenuItems() {
        if (products?.length) {
          setOpen(true);
        } else {
          setOpen(false);
        }
      },
      [products],
    );

    return (
      <MenuList className={classes.menuList}>
        {defaultNavigationItems.map(item => (
          <NavigationMenuItem
            key={`navigation-menu-item-${item.navigation}`}
            navigation={item.navigation}
            title={item.title}
            icon={
              item.navigation === DefaultNavigation.AlertInsightsHeader ? (
                <Badge badgeContent={alerts} color="secondary">
                  {React.cloneElement(item.icon, {
                    className: classes.navigationIcon,
                  })}
                </Badge>
              ) : (
                React.cloneElement(item.icon, {
                  className: classes.navigationIcon,
                })
              )
            }
          />
        ))}
        <Collapse in={isOpen} timeout={850}>
          {productNavigationItems.map((item: NavigationItem) => (
            <NavigationMenuItem
              key={`navigation-menu-item-${item.navigation}`}
              navigation={item.navigation}
              icon={React.cloneElement(item.icon, {
                className: classes.navigationIcon,
              })}
              title={item.title}
            />
          ))}
        </Collapse>
      </MenuList>
    );
  },
);