import { Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
interface configurations{
  isContainImages: boolean;
  chosenField: string;
  singleSelection:boolean;
}

interface CheckAllCheckbox{
  isSelected:boolean;
}
interface ToggleMenu{
  isClicked: boolean;
}
interface AllSelected{
  isMasterSelected:boolean
}
interface CheckedItems{
  dataChecked: string[];
  dataDisplayed: string[];
}

@Component({
  selector: 'multi-select',
  template: `
  <style>
  .multi-select-body{
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
}
.multi-select-select-menu{
    width  : 23.75em ;
    margin  : 9.375em auto;
    z-index : 0;

    .multi-select-select-btn{
      display         : flex;
      height          :1em;
      padding         : 1.25em;
      font-size       : 1.125em;
      font-weight     : 400;
      border-radius   : 0.5em;
      align-items     : center;
      box-shadow      : 0 0 0.8em #9aa0af;
      cursor          : pointer;
      justify-content : space-between;
        .multi-select-arrow{
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top:6px solid #111;
            transition: 0.3s;
            margin-left: 2rem;
        }
    }

    .multi-select-options{
        position: relative;
        padding: 1.25em;
        margin-top: 0.625em;
        border-radius: 0.5em;
        transition: 0.1s;
        box-shadow:0 0 0.8em #9aa0af;
        z-index: 0;
        .multi-select-search-options{
        display: flex;
        height: 1em;
        padding: 1em 1em;
        align-items: center;
        .multi-select-all-checkbox{
        width: 1.6em;
        height: 1.6em;
        margin-right: 1.3em;
        }
        .multi-select-search-box{
            width: 17em;
            height: 1.5625em;
            margin-right: 1.3em;
        
        }
        .fa{
            font-size:1.2em;
            &:hover{
                transform: scale(1.1);
            }
            
        }

        }
        .multi-select-option{
            display: flex;
            height: 3.4375em;
            cursor: pointer;
            padding: 0 1em;
            border-radius: 0.5em;
            align-items: center;
            z-index: -1;
            &:hover{
                background: #f2f2f2;
            }
            .multi-select-optionText{
                position: relative;
                font-size: 1em;
                color: #333;
                width: 23.75em;
                cursor: pointer;
                z-index: 0;
                .multi-select-single-checkbox{
                    width: 1.5625em;
                    height: 1.5625em;
                    margin-right: 1em;
                }
            }
        }
    }
}

.select-clicked{
    border: 2px #949fba solid;
    box-shadow: 0 0 0.8em #949fba;
}

.arrow-rotate{
    transform: rotate(180deg);
}
.menu-open{
    opacity: 1;
}

.menu-closed{
    opacity: 0;
}
.single-selection{
  display: none;
}

  </style>
  <form [formGroup]="formValue" [ngStyle]="customStyle.formStyle">
  <div class="body" [ngStyle]="customStyle.bodyStyle" >
      <div class="select-menu" [ngStyle]="customStyle.selectMenuStyle" >
          <div class="select-btn" [ngStyle]="customStyle.selectBtnStyle" (click)="toggleMenu()" [ngClass]="{'select-clicked':isClicked === true}">
              <span class="select-btn-text" [ngStyle]="customStyle.selectTextStyle" [innerText]="selectedData"></span>
              <div class="arrow" [ngStyle]="customStyle.arrowSelectStyle"  [ngClass]="{'arrow-rotate':isClicked === true}"></div>
          </div>
          <ul class="options" [ngStyle]="customStyle.optionsListStyle" [ngClass]="{'menu-open':isClicked === true, 'menu-closed':isClicked === false}" >
              <div class="search-options" [ngStyle]="customStyle.searchOptionsStyle">
                  <input type="checkbox" class="checkbox" [ngClass]="{'single-selection': configurations.singleSelection===true}"[ngStyle]="customStyle.selectAllcheckboxStyle" [(ngModel)]="isMasterSel" [ngModelOptions]="{standalone: true}" (change)="checkUncheckAll()">
                  <input type="text" class="search-box"  [ngStyle]="customStyle.searchBoxStyle"   [(ngModel)]="filteredData" [ngModelOptions]="{standalone: true}" (keyup) ="filterCities()">
                  <span><i [ngStyle]="customStyle.closeBtnStyle" class="fa fa-times"  (click)="toggleMenu()" [ngClass]="{'menu-open':isClicked === true}" ></i></span>
              </div>
               <li class="option" [ngStyle]="customStyle.optionStyle"  #dataFill *ngFor="let data of filterdData" [value]="data" formControlName="dataName" ngDefaultControl>
              <label class="optionText" [ngStyle]="customStyle.optionTextStyle">
                  <input type="checkbox" id="{{data.id}}" class="checkbox" [ngStyle]="customStyle.selectCheckboxStyle" (change)="isAllSelected(data.id)" [(ngModel)]="data.isSelected" [ngModelOptions]="{standalone: true}">
                  <img src="" #images *ngIf="configurations.isContainImages">
                  {{data.name}}
              </label>
          </li>       
          </ul>
      </div>
  </div>
</form>
`
})
export class MultiSelectComponent implements OnInit {
  //Inputs
  @Input() data:any =[];
  @Input() configurations;
  @Input() customStyle: any;
  @ViewChild('selectMenu') selectMenu?: ElementRef;

  //Outputs
  @Output() onCheckAllClick: EventEmitter<CheckAllCheckbox> =new EventEmitter();
  @Output() onToggleMenu: EventEmitter<ToggleMenu> =new EventEmitter();
  @Output() onAllSelected: EventEmitter<AllSelected>=new EventEmitter();
  @Output() onItemsChecked: EventEmitter<CheckedItems>=new EventEmitter();


  isClicked=false;
  isMasterSel=false;
  checkedDataList:any;
  selectedData:any;
  length=0;
  filterdData :any=[];
  filteredData:any;
  myForm?: any;
  formValue?:any;
  constructor(private formBuilder: FormBuilder,private renderer: Renderer2) {}

  // Getter method to access formcontrols
  get dataName() {
    return this.formValue?.get('dataName');
  }

  ngOnInit(): void {
    this.getCheckedDataList();
    this.filterdData=this.data;
    this.formValue=this.formBuilder.group({
    dataName:['']
   });
  }


  //Function to close and open menu whenever the close button is closed or the menu arrow is clicked
  toggleMenu():void{
    this.isClicked=!this.isClicked;
    this.onToggleMenu.emit({isClicked:this.isClicked});
  }
  //Function triggered on the check all checkbox to select all checkboxes in the menu
  checkUncheckAll(){
    for (let i = 0; i < this.data.length; i++) {
      this.data[i].isSelected = this.isMasterSel;
    }
    this.getCheckedDataList();
    this. onCheckAllClick.emit({isSelected:this.isMasterSel});
  }

  //Function triggered when all menu items are checked and the effect must be reflected on the check all checkbox
  isAllSelected(selectedDataId: any) {
    if(!this.configurations.singleSelection){
      this.isMasterSel = this.data.every(function(city:any) {
        return city.isSelected == true;
      })
    }
    else{
      for(let i=0;i<this.data.length;i++){
        if(this.data[i].id!=selectedDataId){
          this.data[i].isSelected = false;
        }
      }

    }

    this.getCheckedDataList();
    this.onAllSelected.emit({isMasterSelected:this.isMasterSel});
  }

  //Function to get the checked items from the menu to be displayed in the selected box

  getCheckedDataList(){
    this.checkedDataList = [];
    this.selectedData=[];
    for (let i = 0; i < this.data.length; i++) {
      if(this.data[i].isSelected){
      this.checkedDataList.push(this.data[i]);
      this.selectedData.push(this.data[i].name)
      }
    }
    if(this.selectedData.length===0)
    this.selectedData.push("Select an Item");

    if(this.selectedData.length >3){
      this.length=this.selectedData.length;
      this.selectedData= this.length + " items Selected"
    }

    this.checkedDataList = JSON.stringify(this.checkedDataList);
    this.selectedData =JSON.parse( JSON.stringify(this.selectedData));
    this.onItemsChecked.emit({dataChecked:this.checkedDataList, dataDisplayed:this.selectedData});
  }

  //Function triggered when a search in conducted in the search box of the menu

  filterCities() {
    this.filterdData = this.filteredData===""? this.data : this.data.filter(
      item => {return item.name.toLowerCase().includes(this.filteredData.toLowerCase())}
    );
    }
}