import React from 'react';
import { Button, Flex, Typo } from '../atoms';

interface Item {
  itemRender?: (item: Item) => React.ReactNode;
  key: string;
  onClick?: () => void;
  title: string;
  icon?: React.ReactNode;
  children?: Item[];
}

export interface NavigationProps {
  items?: Item[];
  fontColor?: string;
  backgroundColor?: string;
  activeKey?: string;
}

export function Navigation({
  items,
  fontColor,
  backgroundColor,
  activeKey,
}: NavigationProps): React.ReactNode {
  return (
    <Flex
      direction="column"
      gap="4"
      pr="3"
      style={{
        color: fontColor || 'var(--white-a12)',
        backgroundColor: backgroundColor || 'var(--black-a12)',
      }}
    >
      {items?.map((item) => {
        const { key, title, icon, itemRender, onClick, children } = item;
        return (
          <Flex direction="column" key={key} onClick={onClick}>
            {itemRender ? (
              itemRender(item)
            ) : (
              <Flex align="center" gap="3" height="36px" pl="4" pr="4">
                {icon}
                <Typo variant="subtitle">{title}</Typo>
              </Flex>
            )}
            {children?.map((menu) => {
              return menu.itemRender ? (
                menu.itemRender(menu)
              ) : (
                <Button
                  className={`tipp-navigation-button ${activeKey === menu.key ? 'active' : ''}`}
                  key={menu.key}
                  ml="37px"
                  onClick={menu.onClick}
                  size="large"
                  style={{
                    color: 'var(--white-a12)',
                    height: '32px',
                    paddingLeft: 'var(--space-2)',
                  }}
                >
                  {menu.title}
                </Button>
              );
            })}
          </Flex>
        );
      })}
    </Flex>
  );
}
