import { Injectable } from '@angular/core';
import { MenuItemsService } from './menu-items.service';

export interface BadgeItem {
  type: string;
  value: string;
}

export interface ChildrenItems {
  state: string;
  name: string;
  type?: string;
  badge?: BadgeItem[];
}

export interface Menu {
  state: string;
  name: string;
  type: string;
  icon: string;
  badge?: BadgeItem[];
  children?: ChildrenItems[];
}

const MENUITEMS = [
  {
    state: 'users',
    name: 'USERS',
    type: 'link',
    icon: 'face'
  },
  {
    state: 'home',
    name: 'HOME',
    type: 'link',
    icon: 'explore'
  },
  {
    state: 'apps',
    name: 'APPS',
    type: 'sub',
    icon: 'apps',
    badge: [
      { type: 'red', value: '5' }
    ],
    children: [
      { state: 'calendar', name: 'CALENDAR' },
      { state: 'media', name: 'MEDIA' },
      { state: 'messages', name: 'MESSAGES' },
      { state: 'social', name: 'SOCIAL' },
      { state: 'chat', name: 'CHAT' }
    ]
  },
  {
    state: 'widgets',
    name: 'WIDGETS',
    type: 'link',
    icon: 'photo'
  },
  {
    state: 'material',
    name: 'MATERIAL',
    type: 'sub',
    icon: 'equalizer',
    badge: [
      { type: 'purple', value: '10' }
    ],
    children: [
      { state: 'button', name: 'BUTTON' },
      { state: 'cards', name: 'CARDS' },
      { state: 'select', name: 'SELECT' },
      { state: 'input', name: 'INPUT' },
      { state: 'checkbox', name: 'CHECKBOX' },
      { state: 'radio', name: 'RADIO' },
      { state: 'toolbar', name: 'TOOLBAR' },
      { state: 'lists', name: 'LISTS' },
      { state: 'grid', name: 'GRID' },
      { state: 'progress', name: 'PROGRESS' },
      { state: 'tabs', name: 'TABS' },
      { state: 'switch', name: 'SWITCH' },
      { state: 'tooltip', name: 'TOOLTIP' },
      { state: 'menu', name: 'MENU' },
      { state: 'slider', name: 'SLIDER' },
      { state: 'snackbar', name: 'SNACKBAR' },
      { state: 'dialog', name: 'DIALOG' }
    ]
  },
  {
    state: 'forms',
    name: 'FORMS',
    type: 'sub',
    icon: 'looks_3',
    children: [
      { state: 'editor', name: 'EDITOR' },
      { state: 'validation', name: 'VALIDATION' },
      { state: 'upload', name: 'UPLOAD' },
      { state: 'tree', name: 'TREE' },
    ]
  },
  {
    state: 'tables',
    name: 'TABLES',
    type: 'sub',
    icon: 'format_line_spacing',
    badge: [
      {
        type: 'blue-grey', value: '8'
      }
    ],
    children: [
      { state: 'fullscreen', name: 'FULLSCREEN' },
      { state: 'editing', name: 'EDITING' },
      { state: 'filter', name: 'FILTER' },
      { state: 'paging', name: 'PAGING' },
      { state: 'sorting', name: 'SORTING' },
      { state: 'pinning', name: 'PINNING' },
      { state: 'selection', name: 'SELECTION' },
    ]
  },
  {
    state: 'charts',
    name: 'CHARTS',
    type: 'link',
    icon: 'show_chart',
  },
  {
    state: 'maps',
    name: 'MAPS',
    type: 'sub',
    icon: 'navigation',
    badge: [
      {
        type: 'green', value: 'new'
      }
    ],
    children: [
      { state: 'google', name: 'GOOGLE' },
      { state: 'leaflet', name: 'LEAFLET' }
    ]
  },
  {
    state: 'dragndrop',
    name: 'DND',
    type: 'link',
    icon: 'show_chart',
  },
  {
    state: 'pages',
    name: 'PAGES',
    type: 'sub',
    icon: 'pages',
    children: [
      { state: 'invoice', name: 'INVOICE' },
      { state: 'timeline', name: 'TIMELINE' },
      { state: 'user', name: 'USER' },
      { state: 'blank', name: 'BLANK' },
    ]
  },
  {
    state: 'session',
    name: 'SESSION',
    type: 'sub',
    icon: 'face',
    children: [
      { state: '404', name: '404' },
      { state: 'error', name: 'ERROR' },
      { state: 'signin', name: 'SIGNIN' },
      { state: 'signup', name: 'SIGNUP' },
      { state: 'forgot', name: 'FORGOT' },
      { state: 'lockscreen', name: 'LOCKSCREEN' },
    ]
  },
  {
    state: 'http://primer.nyasha.me/docs',
    name: 'DOCS',
    type: 'extTabLink',
    icon: 'local_library'
  }
];

@Injectable()
export class MenuItems {
  private updateCountsTimer: any;
  constructor(private menuItemsService: MenuItemsService) {

    this.updateMenuItems();
  }

  getAll(): Menu[] {
    return MENUITEMS;
  }

  add(menu: Menu) {
    MENUITEMS.push(menu);
  }

  private updateSubMenuItems(items: any, menuRoot: Menu, calcCount: (acc, item) => { sum: number }) {

    const counts = items.reduce(calcCount, { sum: 0 });
    menuRoot.children.forEach(status => {
      if (counts[status.state]) {
        status.badge = [{ type: 'red', value: counts[status.state] }];
      } else {
        status.badge = undefined;
      }
    });
    menuRoot.badge[0].value = counts.sum.toString();
  }

  private updateMenuItems() {
    const refreshCountsTomeoutSec = 3000;
    clearTimeout(this.updateCountsTimer);
    
    this.updateCountsTimer = setTimeout(() => {
      console.log('update count timer');
      this.updateMenuItems();
    }, refreshCountsTomeoutSec);

  }

}
