// app.component.ts
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  filterValues = {};
  dataSource = new MatTableDataSource();
  displayedColumns: string[] = ['name', 'category', 'price', 'rating', 'brand'];

  filterSelectObj = [];
  constructor(
  ) {

    // Object to create Filter for
    this.filterSelectObj = [
      {
        name: 'NAME',
        columnProp: 'name',
        options: []
      }, {
        name: 'CATEGORY',
        columnProp: 'category',
        options: []
      }, {
        name: 'BRAND',
        columnProp: 'brand',
        options: []
      }, {
        name: 'Price',
        columnProp: 'price',
        options: []
      }, {
        name: 'Rating',
        columnProp: 'rating',
        options: []
      }
    ]
  }

  ngOnInit() {
    this.getRemoteData();

    // Overrride default filter behaviour of Material Datatable
    this.dataSource.filterPredicate = this.createFilter();
  }

  // Get Uniqu values from columns to build filter
  getFilterObject(fullObj, key) {
    const uniqChk = [];
    fullObj.filter((obj) => {
      if (!uniqChk.includes(obj[key])) {
        uniqChk.push(obj[key]);
      }
      return obj;
    });
    return uniqChk;
  }

  // Get remote serve data using HTTP call
  getRemoteData() {

    const remoteDummyData = [
      {
        "name": "Dell Inspiron Laptop",
        "category": "Electronics",
        "brand": "Dell",
        "price": "Rs. 80,000",
        "rating": "5 Star"
      },
      {
        "name": "Dell Notebook",
        "category": "Electronics",
        "brand": "Dell",
        "price": "Rs. 50,000",
        "rating": "4 Star"
      },
      {
        "name": "Dell Business Laptop",
        "category": "Electronics",
        "brand": "Dell",
        "price": "Rs. 1,20,000",
        "rating": "3 Star"
      },
      {
        "name": "Tommy Hillfiger Shirt",
        "category": "Apparel",
        "brand": "Tommy Hillfiger",
        "price": "Rs. 1,000",
        "rating": "4 Star"
      },
      {
        "name": "Aeropostale T-Shirt",
        "category": "Apparel",
        "brand": "Aeropostale",
        "price": "Rs. 5,000",
        "rating": "5 Star"
      },
      {
        "name": "Tommy Hillfiger T-Shirt",
        "category": "Apparel",
        "brand": "Tommy Hillfiger",
        "price": "Rs. 4,000",
        "rating": "5 Star"
      },
      {
        "name": "Aeropostale Shirt",
        "category": "Apparel",
        "brand": "Aeropostale",
        "price": "Rs. 5,000",
        "rating": "2 Star"
      },
      {
        "name": "Ipad Pro",
        "category": "Electronics",
        "brand": "Apple",
        "price": "Rs. 1,10,000",
        "rating": "5 Star"
      },
      {
        "name": "Macbook Pro",
        "category": "Electronics",
        "brand": "Apple",
        "price": "Rs. 1,10,000",
        "rating": "5 Star"
      },
      {
        "name": "Iphone X",
        "category": "Electronics",
        "brand": "Apple",
        "price": "Rs. 50,000",
        "rating": "4 Star"
      }
    ];
    this.dataSource.data = remoteDummyData;

    this.filterSelectObj.filter((o) => {
      o.options = this.getFilterObject(remoteDummyData, o.columnProp);
    });
  }

  // Called on Filter change
  filterChange(filter, event) {
    //let filterValues = {}
    console.log(filter)
    console.log(event)
    this.filterValues[filter.columnProp] = event.target.value.trim().toLowerCase()
    this.dataSource.filter = JSON.stringify(this.filterValues)
  }

  // Custom filter method fot Angular Material Datatable
  createFilter() {
    let filterFunction = function (data: any, filter: string): boolean {
      let searchTerms = JSON.parse(filter);
      let isFilterSet = false;
      for (const col in searchTerms) {
        if (searchTerms[col].toString() !== '') {
          isFilterSet = true;
        } else {
          delete searchTerms[col];
        }
      }

      console.log(searchTerms);

      let nameSearch = () => {
        let found = false;
        if (isFilterSet) {
          for (const col in searchTerms) {
            searchTerms[col].trim().toLowerCase().split(' ').forEach(word => {
              if (data[col].toString().toLowerCase().indexOf(word) != -1 && isFilterSet) {
                found = true
              }
            });
          }
          return found
        } else {
          return true;
        }
      }
      return nameSearch()
    }
    return filterFunction
  }


  // Reset table filters
  resetFilters() {
    this.filterValues = {}
    this.filterSelectObj.forEach((value, key) => {
      value.modelValue = undefined;
    })
    this.dataSource.filter = "";
  }
}