import { Injectable } from '@angular/core';
import {BehaviorSubject, Subject} from 'rxjs';
import { SideNavConfig } from '../utils';
import { find } from 'lodash';
import { UserConfigService } from '../utils/user-config.service';
declare var CONFIG: any;

@Injectable({
  providedIn: 'root',
})
export class SidePanelsService {
  private defaultPanelConfig = {
    status: false,
    position: 'left',
    closeOnClickOutside: true,
    closeOnClickBackdrop: true,
    showBackdrop: true,
    mode: 'over',
    animate: false,
    type: 'leftSideMenu',
  };
  private sideMenudata = [];

  private defaultSideMenudata = [
    {
      menuApp: 'Home',
      menuAppUrl: '/home',
      toggleSubMenu: false,
      icon: 'assets/icon/home.svg',
      subMenu: [],
      appName: 'home'
    },
    {
      menuApp: 'Demand Forecasting',
      menuAppUrl: '/df/demand-forecasting',
      toggleSubMenu: false,
      icon:  'assets/icon/demand-forecasting.svg',
      subMenu: [],
      appName: 'df'
    },
    {
      menuApp: 'Predictive Ordering',
      menuAppUrl: '/dpo/predictive-ordering',
      toggleSubMenu: false,
      icon: 'assets/icon/predictive-ordering.svg',
      subMenu: [],
      appName: 'dpo'
    },
    {
      menuApp: 'Data Management',
      menuAppUrl: '/dmg/data-management',
      toggleSubMenu: false,
      icon: 'assets/icon/data-management.svg',
      subMenu: [],
      appName: 'dmg'
    },
    {
      menuApp: 'Collaborative Planning',
      menuAppUrl: '/cp/collaborative-planning',
      toggleSubMenu: false,
      icon: 'assets/icon/collaborative-planning.svg',
      subMenu: [],
      appName: 'cp'
    },
    {
      menuApp: 'Trade Promotion',
      menuAppUrl: '/tpo/trade-promotion',
      toggleSubMenu: false,
      icon: 'assets/icon/demand-forecasting.svg',
      subMenu: [
        {
          menuPage: 'Trade Desk',
          menuUrl: 'trade-promotion/trade-desk',
          icon: 'assets/icon/demand-forecasting-sense-check.svg',
        },
        {
          menuPage: 'Account Results',
          menuUrl: 'trade-promotion/account-results',
          icon: 'assets/icon/demand-forecasting-sense-check.svg',
        },
        {
          menuPage: 'Account Planning',
          menuUrl: 'trade-promotion/account-planning',
          icon: 'assets/icon/demand-forecasting-sense-check.svg',
        },
        {
          menuPage: 'Scenario Analysis',
          menuUrl: 'trade-promotion/scenario-analysis',
          icon: 'assets/icon/demand-forecasting-sense-check.svg',
        },
        {
          menuPage: 'Post Event Reporting',
          menuUrl: 'trade-promotion/reports',
          icon: 'assets/icon/demand-forecasting-sense-check.svg',
        },
        {
          menuPage: 'Account Approval WorkList',
          menuUrl: 'trade-promotion/account-approval',
          icon: 'assets/icon/demand-forecasting-sense-check.svg',
        },
      ],
      appName: 'tpo'
    },
    {
      menuApp: 'Order Promising',
      menuAppUrl: '/iop/order-promising',
      toggleSubMenu: false,
      icon: 'assets/icon/iop-icon.png',
      subMenu: [],
      appName: 'iop'
    },
    {
      menuApp: 'Demand Planning',
      menuAppUrl: '/dp/demand-planning',
      toggleSubMenu: false,
      icon: 'assets/icon/demand-forecasting.svg',
      subMenu: [],
      appName: 'dp'
    },
    {
      menuApp: 'Control Center',
      menuAppUrl: '/cc/control-center',
      toggleSubMenu: false,
      icon: 'assets/icon/data-management.svg',
      subMenu: [],
      appName: 'cc'
    },
    {
      menuApp: 'AI Virtual Machine Web Console',
      menuAppUrl: '/aivm/ai-vm-web-console',
      toggleSubMenu: false,
      icon: 'assets/icon/demand-forecasting.svg', // todo change icon
      subMenu: [],
      appName: 'aivm'
    },
    {
      menuApp: 'Lifecycle Pricing',
      menuAppUrl: '/lcp/lifecycle-pricing/optimize',
      toggleSubMenu: false,
      icon: 'assets/icon/lcp-icon.svg',
      subMenu: [],
      appName: 'lcp'
    },
    {
      menuApp: 'Allocation',
      menuAppUrl: '/fars/allocation',
      toggleSubMenu: false,
      icon: 'assets/icon/demand-forecasting.svg', // todo change icon
      subMenu: [],
      appName: 'fars'
    },
    {
      menuApp: 'Replenishment',
      menuAppUrl: '/repl/replenishment',
      toggleSubMenu: false,
      icon: 'assets/icon/demand-forecasting.svg', // todo change icon
      subMenu: [],
      appName: 'repl'
    },
    {
      menuApp: 'Demand Modeling Studio',
      menuAppUrl: '/dms',
      toggleSubMenu: false,
      icon: 'assets/icon/lcp-icon.svg', // todo change icon
      subMenu: [],
      appName: 'dms'
    },
    {
      menuApp: 'Common Component UI',
      menuAppUrl: '/comm',
      toggleSubMenu: false,
      icon: 'assets/icon/demand-forecasting.svg', // todo change icon
      subMenu: [],
      appName: 'comm'
    },
  ];

  private sidePanelConfig = new BehaviorSubject<SideNavConfig>(this.defaultPanelConfig);
  private sideMenu = new BehaviorSubject<any>(this.sideMenudata);
  private sidePanelOpen = new BehaviorSubject<boolean>(false);
  headerSettingsSubs = new BehaviorSubject<boolean>(false);
  headerSettings$ = this.headerSettingsSubs.asObservable();
  activeTabSubject = new BehaviorSubject<boolean>(false);
  activeTab$ = this.activeTabSubject.asObservable();

  cast = this.sidePanelConfig.asObservable();
  castSideMenu = this.sideMenu.asObservable();
  castSidePanelOpen = this.sidePanelOpen.asObservable();
  openSimpleSideMenuSub = new Subject();
  openSimpleSideMenu$ = this.openSimpleSideMenuSub.asObservable();
  constructor(private userConfig: UserConfigService) {}

  editSidePanelConfig(newConfig): void {
    this.filterApplicationsForUser();
    if (newConfig.type !== 'filterCard') {
      this.sidePanelOpen.next(false);
    } else {
      this.sidePanelOpen.next(newConfig.status);
    }
    this.sidePanelConfig.next(newConfig);
  }

  toggleSideMenu(menuItem): void {
    const parentMenuClicked = find(this.sideMenudata, menuName => {
      return menuName.menuApp === menuItem;
    });

    this.sideMenudata.map(menu => {
      if (parentMenuClicked.menuApp !== menu.menuApp) {
        return (menu.toggleSubMenu = false);
      }
    });

    parentMenuClicked.toggleSubMenu = !parentMenuClicked.toggleSubMenu;

    this.sideMenu.next(this.sideMenudata);
  }

  filterApplicationsForUser() {
    if (this.sideMenudata.length > 0) {
      return this.sideMenudata;
    }
    const applications = this.userConfig.getApplicationsForUser();
    if (applications.length > 0) {
      const appName = this.userConfig.currentApp === 'vm'? 'aivm': this.userConfig.currentApp;
        this.defaultSideMenudata.map(app => {
            const origin = CONFIG.BASE_URL;
            app.icon = `${origin}${app.icon}`;
            if (app.subMenu.length > 0) {
            app.subMenu.map(menu => {
                menu.icon = `${origin}${menu.icon}`;
            })
            }
      })
      this.defaultSideMenudata.forEach(menu => {
        applications.forEach(app => {
          if (app['applicationName'] === menu.appName) {
            this.sideMenudata.push({ ...menu, menuApp: app.i18n.translations[app['applicationName']]});
          }
        });
      });
    }
  }
}