import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ProfileService } from '../profile.service';
import { IResponseUser, Profile, ILanguage } from '../../interfaces';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from '../../shared/services/user.service';
import { SharedService } from '../../shared/shared.service';
import { ICity } from '../../interfaces/ICity';
import { ICompetence } from '../../interfaces/ICompetence';
import { Chart } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';

import * as moment from 'moment';

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

export class AccountComponent implements OnInit {

  @ViewChild(BaseChartDirective) chart: BaseChartDirective;

  @ViewChild('visitsChart')
  visitsChart: BaseChartDirective;

  @ViewChild('detailsChart')
  detailsChart: BaseChartDirective;

  dataRangemodel: any = {
    beginDate: { year: 2018, month: 10, day: 9 },
    endDate: { year: 2018, month: 10, day: 19 }
  };

  currentSpec: string;
  public cities: ICity[];
  public profile: Profile;
  public languges: ILanguage[];
  public competencies: ICompetence[];
  private currentCity: string;

  public chartColors: any[] = [{}];

  public chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    hover: {
      mode: 'index'
    },
    scales: {
      yAxes: [{
        gridLines: {
          display: true,
          color: '#e6e6ed',
          drawBorder: true,
          tickMarkLength: 0,
          zeroLineColor: '#d5d5de'
        },
        ticks: {
          suggestedMin: 5,
          stepSize: 5,
          suggestedMax: 10,
          padding: 9,
          fontSize: 11,
          fontFamily: 'Montserrat',
          fontColor: '#000000'
        }
      }],
      xAxes: [{
        gridLines: {
          display: true,
          color: '#e6e6ed',
          drawBorder: false,
          tickMarkLength: 0,
          zeroLineColor: '#d5d5de',
        },
        ticks: {
          suggestedMin: 5,
          stepSize: 5,
          padding: 9,
          fontSize: 11,
          fontFamily: 'Montserrat',
          fontColor: '#000000',
        }
      }],
    },
    tooltips: {
      enabled: false,
      position: 'nearest',
      mode: 'index',
      intersect: false,
      custom: ((that: any) => {
        return function(tooltip) {
          that.customTooltips(tooltip, that, this);
        };
      })(this)
    },
  };

  public visitsStatisticsChartLabels = ['', '19', '20', '21', '22', '23', '24'];
  public detailViewChartLabels = ['', '19', '20', '21', '22', '23', '24'];

  public chartConfig = [
    {
      chartName: 'visitsChart',
      datasets: [
        {
          id: 0,
          hidden: false,
          name: 'user',
          point: 'circleGold',
          data: [0, 17, 17, 19, 16, 19, 42],
          borderColor: '#C68A54',
          label: 'ProfileViews',
          navTitle: 'My Page Views',
          tipTitle: 'Profile Views',
          iconClass: 'chart-icon--circle-gold',
          hiddenIconClass: 'chart-icon--circle-hidden',
          fill: false,
          pointRadius: 2,
          borderWidth: 2,
        },
        {
          id: 1,
          hidden: false,
          name: 'category',
          point: 'diamondGray',
          data: [0, 30, 22, 37, 20, 31, 49],
          borderColor: '#e6e6ed',
          label: 'CategoryViews',
          navTitle: 'Category Visits',
          tipTitle: 'Category Views',
          iconClass: 'chart-icon--diamond-gray',
          hiddenIconClass: 'chart-icon--diamond-hidden',
          fill: false,
          pointRadius: 2,
          borderWidth: 2,
          borderDash: [10, 5]
        },
      ],
      templateFunction: 'visitTemplate'
    },
    {
      chartName: 'detailsChart',
      datasets: [
        {
          id: 3,
          hidden: false,
          name: 'user',
          point: 'circleGray',
          data: [30, 40, 42, 50, 41, 49, 80],
          borderColor: '#e6e6ed',
          label: 'TotalProfileViews',
          navTitle: 'My page view',
          tipTitle: 'Total Profile Views',
          iconClass: 'chart-icon--circle-gray',
          hiddenIconClass: 'chart-icon--circle-hidden',
          fill: false,
          pointRadius: 2,
          borderWidth: 2,
          borderDash: [10, 5]
        },
        {
          id: 4,
          hidden: false,
          name: 'map',
          point: 'diamondBlue',
          data: [28, 10, 22, 40, 23, 39, 39],
          borderColor: '#8BBEFF',
          label: 'MapView',
          navTitle: 'Map checks',
          tipTitle: 'Map',
          iconClass: 'chart-icon--diamond-blue',
          hiddenIconClass: 'chart-icon--diamond-hidden',
          fill: false,
          pointRadius: 2,
          borderWidth: 2,
        },
        {
          id: 5,
          hidden: false,
          name: 'email',
          point: 'diamondRed',
          data: [0, 11, 9, 17, 10, 13, 20],
          borderColor: '#DF4F4F',
          label: 'EmailView',
          navTitle: 'Email checks',
          tipTitle: 'Email',
          iconClass: 'chart-icon--diamond-red',
          hiddenIconClass: 'chart-icon--diamond-hidden',
          fill: false,
          pointRadius: 2,
          borderWidth: 2,
        },
        {
          id: 6,
          hidden: false,
          name: 'phone',
          point: 'diamondGreen',
          data: [0, 0, 18, 0, 19, 28, 8],
          borderColor: '#8CCE7C',
          label: 'PhoneView',
          navTitle: 'Phone checks',
          tipTitle: 'Phone',
          iconClass: 'chart-icon--diamond-green',
          hiddenIconClass: 'chart-icon--diamond-hidden',
          fill: false,
          pointRadius: 2,
          borderWidth: 2,
        }
      ],
      templateFunction: 'detailsTemplate'
    }
  ];

  public pointImageSources = {
    circleGray: '/assets/img/chart-icons/circle-gray.svg',
    circleGold: '/assets/img/chart-icons/circle-gold.svg',
    diamondGray: '/assets/img/chart-icons/diamond-gray.svg',
    diamondBlue: '/assets/img/chart-icons/diamond-blue.svg',
    diamondGreen: '/assets/img/chart-icons/diamond-green.svg',
    diamondRed: '/assets/img/chart-icons/diamond-red.svg'
  };

  public customTooltips (tooltip, that, chart) {
    const chartName = chart._chart.canvas.id;
    const config = that.chartConfig.find(chartCfg => chartCfg.chartName === chartName);
    const positionY = chart._chart.canvas.getBoundingClientRect().y + window.pageYOffset;
    const positionX = chart._chart.canvas.getBoundingClientRect().x;
    const domTooltip = document.getElementById('tooltip');

    if (!tooltip || !tooltip.opacity) {
      domTooltip.style.opacity = '0';
      return;
    }

    if (tooltip.dataPoints.length > 0) {
      tooltip.dataPoints.forEach((dataPoint, i) => {
        const content = that[config.templateFunction](that, config, dataPoint);

        domTooltip.innerHTML = content;
        domTooltip.style.opacity = '1';

        domTooltip.style.top = positionY + dataPoint.y + 'px';
        domTooltip.style.left = positionX + dataPoint.x + 'px';
      });
    }
  }

  public visitTemplate(that, config, dataPoint) {
    return config.datasets.filter(item => !item.hidden).map(item => {
      return `
        <div class='tooltip__row'>
          <span class='chart-icon ${ item.iconClass }'></span>
          <span class='tooltip__text'>${ item.tipTitle }: ${ item.data[dataPoint.index] }</span>
        </div>
      `;
    }).join('');
  }

  public detailsTemplate(that, config, dataPoint) {
    const items = config.datasets.filter(item => !item.hidden).map(item => {
      return `
        <div class='tooltip__row'>
          <span class='chart-icon ${ item.iconClass }'></span>
          <span class='tooltip__text'>${ item.tipTitle }: ${ item.data[dataPoint.index] }</span>
        </div>
      `;
    });

    items.splice(1, 0, '<div class="tooltip__row-splitter"></div>');

    return items.join('');
  }

  constructor(
    private _profileService: ProfileService,
    private _router: Router,
    private _route: ActivatedRoute,
    private _userService: UserService,
    private _sharedService: SharedService) { }

  ngOnInit() {
    this.getLanguages();
    this.getProfileData();
    this.getCities();
    this.getAllSpecialization();
    this.getLawyerStatistics();

    Chart.pluginService.register({
      afterUpdate: (chart) => {
        const chartName = chart.canvas.id;
        const config = this.chartConfig.find(chartCfg => chartCfg.chartName === chartName);

        if (config) {
          chart.config.data.datasets.map(dataset => {
            dataset._meta[chart.id].data.forEach(dataItem => {
              const pointImg = new Image();
              pointImg.src = this.pointImageSources[dataset.point];
              dataItem._model.pointStyle = pointImg;
            });
          });
        }
      }
    });
  }

  private _isCitySpecId(profile: Profile) {
    return !this.profile.city_id === true || !this.profile.competencies_id == true;
  }

  public toggleActiveChartLine() {
    const el = event.currentTarget as HTMLElement;
    const datasetId = +el.getAttribute('data-dataset-id');
    const chartName = el.getAttribute('data-chart');

    const chart = this[chartName] as BaseChartDirective;

    const chartIndex = this.chartConfig.findIndex(config => config.chartName === chartName);
    const datasetIndex = this.chartConfig[chartIndex].datasets.findIndex(dataset => dataset.id === datasetId);


    const isHidden = this.chartConfig[chartIndex].datasets[datasetIndex].hidden;

    // deny hide last active line in chart
    if (this.chartConfig[chartIndex].datasets.filter(item => !item.hidden).length === 1 && isHidden === false) {
      return;
    }

    this.chartConfig[chartIndex].datasets[datasetIndex].hidden = !isHidden;

    const chartObj = chart as any;
    chartObj.refresh();
  }

  public mapStatistics(statistics) {

    const datasets = [
      {
        statisticName:'user',
        chartName: 'detailsChart',
        data: []
      },
      {
        statisticName:'phone',
        chartName: 'detailsChart',
        data: []
      },
      {
        statisticName:'email',
        chartName: 'detailsChart',
        data: []
      },
      {
        statisticName:'map',
        chartName: 'detailsChart',
        data: []
      },
      {
        statisticName:'user',
        chartName: 'visitsChart',
        data: []
      },
      {
        statisticName:'category',
        chartName: 'visitsChart',
        data: []
      }
    ];

    const dateAxis = this.parseDateAxis(statistics.visits_statistics);

    const detailViews = this.parseChartData([
      'email',
      'phone',
      'map',
      'user'
    ], statistics.detail_views)

    const visitsStatistics = this.parseChartData([
      'category',
      'user'
    ], statistics.visits_statistics)

    const parsedStatistics = {...detailViews, ...visitsStatistics};

    datasets.forEach(dataSet => {
      dataSet.data = parsedStatistics[dataSet.statisticName];
    })

    this.setDateAxisForCharts(dateAxis)
    this.setValueAxisForCharts(datasets);
  }

  public parseChartData(keys, data) {
    let parsedData = {}

    keys.forEach(key => parsedData[key] = [])

    data.forEach(dataItem => {
      keys.forEach(key => {
        const findItem = dataItem.data.find(statisticItem => statisticItem.type === key);
        if (findItem) {
          parsedData[key].push(findItem.count)
        } else {
          parsedData[key].push(0)
        }
      });
    });

    return parsedData;
  }

  public parseDateAxis(data) {
    return data.map(dataItem => moment(dataItem._id.day).format("D MMM"));
  }

  public setDateAxisForCharts(date) {
    this.visitsStatisticsChartLabels = date;
    this.detailViewChartLabels = date;
  }

  public setValueAxisForCharts(datasets) {
    datasets.forEach(dataSet => {
      const index = this.chartConfig.findIndex(chart => chart.chartName === dataSet.chartName);
      const datasetIndex = this.chartConfig[index].datasets.findIndex(dataset => dataset.name === dataSet.statisticName);

      this.chartConfig[index].datasets[datasetIndex].data = dataSet.data;
    });
  }

  getProfileData() {
    const id = this._profileService.currentUserData._id;
    this._profileService.getCurrentProfile(id).subscribe((res: IResponseUser) => {
      this.profile = res.response;

      this.profile.languages = this.profile.languages.map(userLang => {
        return this.languges.find(lang => userLang == lang.id);
      });

      this._profileService.currentUserData = this.profile;

      // if not key city_id & competency_id redirect to profile/spec
      if (this._isCitySpecId(this.profile)) {
        this._router.navigate(['/profile/spec']);
      }
    }, err => {
      console.log(err);
    });
  }

  goToPayment() {
    this._router.navigate(['profile/payment']);
  }

  logOut() {
    this._userService.logout().subscribe(res => {
      localStorage.removeItem('user');
      this._router.navigate(['/']);
    }, err => {
      console.log(err);
    });
  }

  private getCities() {
    this._sharedService.getCities()
      .subscribe((cities: ICity[]) => {
        this.cities = cities;
        this._sharedService.cities = this.cities;
      }, err => {
        console.error(err);
      });
  }

  private getLawyerStatistics() {
    const params = {
      user_id: this._profileService.currentUserData._id,
      start_date: moment(Date.now()).subtract(7,'d').format("Y-M-D"),
      end_date: moment(Date.now()).format("Y-M-D"),
      filter: 'period'
    };
    this._sharedService.getLawyerClickStatistics(params)
      .subscribe((res: any) => {
        this.mapStatistics(res);
      }, err => {
        console.log(err);
      });
  }

  public getAllSpecialization() {
    this._sharedService.getAllCompetition().subscribe((res: any) => {
      this.competencies = res;
      this._sharedService.competencies = this.competencies;
    }, err => {
      console.error(err);
    });
  }

  getLanguages() {
    this._profileService.getLanguages().subscribe((languages: ILanguage[]) => {
      this.languges = languages;
    });
  }
}