import {Component, ElementRef, HostListener, OnInit, ViewChild} from '@angular/core';
import {COMMON_CONFIG, COMMON_TAGS, COMMONTRANSLATIONS} from '../../mockup/mockupData';
import {ToastService, LoaderService, SidePanelsService, UserConfigService} from '@esp/esp-common';
import {ModalService} from '../../modal.service';
import {Subject} from 'rxjs';
// @ts-ignore
const clone = require('rfdc')();
@Component({
	selector: 'aeap-common-ui',
	templateUrl: './common-ui.component.html',
	styleUrls: ['./common-ui.component.scss'],
})
export class CommonUiComponent implements OnInit {
  config;
  i18n;
  componentList;
  components;
  clonedComponents;
  viewTabs;
  pullNav = false;
  exampleChartOpts = { renderer: 'svg' };
  exampleChart;
  openWorkbookList = [];
  activeTabIndex = 0;
  pagination;
  pageAfter = 0;
  hierarchicalSelectOptions;
  navPlaceHolderWidth;
  @ViewChild('navPlaceHolder', {static: false}) navPlaceHolder: ElementRef;
  sidebarData = ['Red', 'Yellow', 'Black', 'Blue', 'Purple'];
  position = 'left';
  resources;
  toolbarNavIcons;
  constructor(private toastService: ToastService,
              private modalService: ModalService,
              private loaderService: LoaderService,
              private userConfig: UserConfigService,
              private sidePanelService: SidePanelsService) {}

  ngOnInit() {
    this.config = COMMON_CONFIG;
    this.i18n = COMMONTRANSLATIONS.translations;
    this.resources = this.config.resources;
    this.componentList = this.config.componentList;
    this.components = this.addComponentTags();
    this.viewTabs = this.config.viewTabs;
    this.exampleChart = this.resources.eChartsData;
    this.clonedComponents = clone(this.components);
    this.pagination = this.resources.pagination;
    this.toolbarNavIcons = this.resources.toolbarNavIcons;

    this.getOffSetTop();
    this.components.forEach((i)=>{
      if(i.label === 'simple-pagination'){
        i.tableProperties = this.config['resources']['tableDataPageOne'];
      }
    });
    this.hierarchicalSelectOptions = this.config.resources.hierarchicalSelectOptions;
    this.setNavPlaceHolderWidth();
  }

  sideBarExpanded(event): void {
    console.log('event', event);
  }

  addComponentTags() {
    this.config.components.map(comp => {
      COMMON_TAGS.tags.forEach(item => {
        if (item.label === comp.label) {
          comp.tag = item.tag;
        }
      })
    });
    return this.config.components;
  }

  setNavPlaceHolderWidth() {
    setTimeout(() => {
      this.navPlaceHolderWidth = this.navPlaceHolder.nativeElement.clientWidth;
    }, 100);
  }

  onResize(e) {
    this.setNavPlaceHolderWidth();
  }

  openSideMenu(position) {
    this.position = position;
    this.sidePanelService.openSimpleSideMenuSub.next();
  }

  @HostListener('window:scroll', ['$event']) // for window scroll events
  onScroll(event) {
    this.pullNav = window.pageYOffset > 52;
  }

  getOffSetTop() {
    setTimeout(() => {
      this.components.forEach((comp) => {
        const list = document.getElementsByClassName(comp.class);
        if (list.length > 0) {
          for (let i = 0; i < list.length; i++) {
            let me = list[i];
            comp.offsetTop = me['offsetTop'];
          }
        }
      });
    }, 0);
  }

  searchResults(event, label): void {
    const searchText = event.text;
    if (searchText.length === 0) {
      this.components = this.clonedComponents;
    } else {
      const index = this.clonedComponents.findIndex(comp => comp.label === label);
      this.components[index].dropdownList = this.clonedComponents[index].dropdownList.filter(list => {
        return list.value.toLowerCase().includes(searchText.toLowerCase());
      })
    }
  }

  breadcrumbClicked(event): void {
    alert(`breadcrumb link clicked ${event}`);
  }

  onCardFilterValueChanged(event) {

  }


  scrollResults(event, label): void {
    const index = this.clonedComponents.findIndex(comp => comp.label === label);
    const additionalArray = this.config.resources.dropdownAdditionalArray;
    additionalArray.forEach(arr => {
      this.components[index].dropdownList.push(arr);
    })
  }

  showToastExample(src): void {
    let toastConfig;
    if (src === 'singleDetail') {
      toastConfig = {
        "data": {
          "value": "",
          "link": {
            "class": "comment-icon",
            "text": ""
          },
          "icon": {
            "class": "close-icon"
          },
          "container": {
            "class": "comment-added"
          },
          onClose: config => this.toastService.deleteToast(config),
          "text": "Single Detail Toast",
          "addTimeout": true,
          "toastTimeout": "5000"
        },
        "position": {
          "top": true,
          "bottom": false,
          "left": true,
          "right": true
        },
        "type": "singleDetailToast"
      }
    }else if (src === 'multi-button') {
      toastConfig = {
        "data": {
          "buttons": [
            {
              "name": "Save"
            }
          ],
          "links": [
            {
              "name": "Cancel"
            }
          ],
          "infoText": {
            "show": false,
            "text": "Double click to edit single values, single click off the field to return to Selection Mode. "
          },
        },
        "style": "multi-button-toast-primary-background",
        "position": {
          "top": false,
          "bottom": true,
          "left": false,
          "right": false
        },
        "type": "multiButtonToast"
      }
    } else {
      toastConfig = {
        data: {
          container: {
            class: src === 'success' ? "success-border": "error-border"
          },
          content: {
            class: src === 'success' ? "success-status-content": "error-status-content",
            header: src === 'success' ? "Success" : "Error",
            message: `This is a ${src} Toast`
          },
          icon: {
            class: `${src}-icon-container`,
            type: "fa-check"
          },
          onClose: config => this.toastService.deleteToast(config),
        },
        position: {
          top: true, bottom: false, left: false, right: false
        },
        showTimeout: 4000,
        type: "statusToast"
      };
    }
    if (src === 'multi-button') {
      // toastConfig.data.links[0]['action'] = this.hello();
      // toastConfig.data.buttons[0]['action'] = this.submitMultiButtonToast();
      toastConfig.data.addTimeout = false;
    }
    this.toastService.addToast(toastConfig);

    setTimeout(() => {
      this.toastService.deleteToasts();
    }, 4000)

  }

  submitMultiButtonToast(): void {

    // alert ('Toast Response Submitted');
  }

  hello () {

  }

  getTabClass(id, activeId): string {
    if (id !== activeId) {
      return 'btn btn-sm btn-secondary'
    } else {
      return 'no-button';
    }
  }

  copyCode(code) {
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = code;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

  switchViewTab(label, id) {
    this.components.map(comp => {
      if (comp.label === label) {
        comp.activeTab = id;
      }
    });
    this.getOffSetTop();
  }

  scrollTo(className): void {
    this.components.forEach(comp => {
      if (comp.class === className) {
        window.scrollTo(0, comp.offsetTop - 100);
      }
    })
  }number

  logout($event) {

  }
  openFormModal(): void {
    // const initialState = this.config.resources.formsModalConfig;
    const initialState = {
      data: {
        title: 'Forms Modal',
        i18n: this.i18n,
        formInputs: [
          {label: 'name', type: 'text', placeholder: 'Enter Name', required: true},
          {label: 'age', type: 'number', placeholder: 'Enter Age', required: false},
          {label: 'role', type: 'singleSelect', placeholder: 'Select Role', required: true,
            showClearSelection: true,
            list: [
              {value: 'Developer', id: 1, selected: false},
              {value: 'QA', id: 2, selected: false},
              {value: 'Manager', id: 3, selected: false}]},
          {label: 'interests', type: 'multiSelect', placeholder: 'Select Interests', required: true,
            list: [
              {value: 'Travel', id: 1, selected: false},
              {value: 'Hiking', id: 2, selected: false},
              {value: 'Cooking', id: 2, selected: false},
              {value: 'Reading', id: 2, selected: false},
              {value: 'Music', id: 3, selected: false}]},
          {label: 'comments', type: 'textArea', placeholder: 'Please enter comments', required: false},
        ]
      }
    }
    this.modalService.openSimpleFormModal({class: 'simple-form-modal', initialState});
    this.modalService.bsModalRef.content.onClose = new Subject<boolean>();
    this.modalService.bsModalRef.content.onClose.subscribe(response => {
      alert(JSON.stringify(response));
    })
  }

  openConfirmModal(): void {
    const initialState = this.config.resources.modalConfig;
    initialState.data.i18n = this.i18n;
    this.modalService.openConfirmModal({class: 'confirm-modal', initialState});
    this.modalService.bsModalRef.content.onClose = new Subject<boolean>();
    this.modalService.bsModalRef.content.onClose.subscribe(response => {
        if (response.status) {
          alert('Confirmation received');
        }
    })
  }
  openShowLoader() {
    this.loaderService.startLoader();
    setTimeout(() => {
      this.loaderService.stopLoader();
    }, 3000);
  }
  onTabChange(event) {
    this.activeTabIndex = event;
  }

  onPaginationClicked(event) {
    this.components.forEach((i)=> {
      if(event.currentPage === 1) {
        i.tableProperties = this.config['resources']['tableDataPageOne'];
      } else if (event.currentPage === 2) {
        i.tableProperties = this.config['resources']['tableDataPageTwo'];
      }
    });
  }

  onHierarchicalDropdownChange(event) {

  }
}