import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
import { NgBlockUI, BlockUI } from 'ng-block-ui';
import { ChartApiService } from '../../../../_services/chart.api';

interface Marker {
  lat: number;
  lng: number;
  label: string;
}

const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
  '7a', '8a', '9a', '10a', '11a',
  '12p', '1p', '2p', '3p', '4p', '5p',
  '6p', '7p', '8p', '9p', '10p', '11p'];

const days = ['Saturday', 'Friday', 'Thursday',
  'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

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

export class UserProfileComponent implements OnInit {

  image1 = [
    {
      img: '../../../../../assets/images/gallery/1.jpg',
      thumb: '../../../../../assets/images/gallery/1.jpg',
      description: 'Image 1'
    }]
  image2 = [{
    img: '../../../../../assets/images/gallery/2.jpg',
    thumb: '../../../../../assets/images/gallery/2.jpg',
    description: 'Image 2'
  }]
  image3 = [{
    img: '../../../../../assets/images/gallery/3.jpg',
    thumb: '../../../../../assets/images/gallery/3.jpg',
    description: 'Image 3'
  }]
  image4 = [{
    img: '../../../../../assets/images/gallery/4.jpg',
    thumb: '../../../../../assets/images/gallery/4.jpg',
    description: 'Image 4'
  }]
  image5 = [{
    img: '../../../../../assets/images/gallery/5.jpg',
    thumb: '../../../../../assets/images/gallery/5.jpg',
    description: 'Image 5'
  }
  ]
  image6 = [
    {
      img: '../../../../../assets/images/gallery/6.jpg',
      thumb: '../../../../../assets/images/gallery/6.jpg',
      description: 'Image 6'
    }
  ]
  image7 = [
    {
      img: '../../../../../assets/images/gallery/7.jpg',
      thumb: '../../../../../assets/images/gallery/7.jpg',
      description: 'Image 7'
    }
  ]
  image8 = [
    {
      img: '../../../../../assets/images/gallery/8.jpg',
      thumb: '../../../../../assets/images/gallery/8.jpg',
      description: 'Image 8'
    }
  ]
  image9 = [
    {
      img: '../../../../../assets/images/gallery/9.jpg',
      thumb: '../../../../../assets/images/gallery/9.jpg',
      description: 'Image 9'
    }
  ]
  image10 = [
    {
      img: '../../../../../assets/images/gallery/10.jpg',
      thumb: '../../../../../assets/images/gallery/10.jpg',
      description: 'Image 10'
    }
  ]
  image11 =
    [
      {
        img: '../../../../../assets/images/gallery/11.jpg',
        thumb: '../../../../../assets/images/gallery/11.jpg',
        description: 'Image 11'
      }
    ];
  image12 =
    [
      {
        img: '../../../../../assets/images/gallery/12.jpg',
        thumb: '../../../../../assets/images/gallery/12.jpg',
        description: 'Image 12'
      }
    ];

  data: any;
  option: any;
  public zoom = 15;
  end: any;

  @BlockUI('projectWorkOne') blockUIProjectWorkOne: NgBlockUI;
  @BlockUI('sofiaOrav') blockUISofiaOrav: NgBlockUI;
  @BlockUI('sofiaOravTwo') blockUISofiaOravTwo: NgBlockUI;

  lat = 40.650002;
  lng = -73.949997;

  options = {
    close: false,
    expand: true,
    minimize: false,
    reload: true
  };

  markers: Marker[] = [
    {
      lat: this.lat,
      lng: this.lng,
      label: ''
    }
  ];
  constructor(private chartApiservice: ChartApiService) { }
  chartOption: echarts.EChartsOption = {
    // grid: {
    //   x: 40,
    //   x2: 40,
    //   y: 45,
    //   y2: 25
    // },

    // Add tooltip
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // Axis indicator axis trigger effective
        type: 'shadow'        // The default is a straight line, optionally: 'line' | 'shadow'
      }
    },

    // Add legend
    legend: {
      data: ['Direct access', 'Email marketing', 'Advertising alliance', 'Video ads',
        'Search engine', 'Google', 'Safari', 'Opera', 'Firefox']
    },

    // Add custom colors
    color: ['#666EE8', '#FF9149', '#FF9966', '#FA8E57', '#FF637b', '#5175E0', '#A147F0', '#28D094', '#BABFC7'],

    // // Enable drag recalculate
    // calculable: true,
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [

      {
        name: 'Direct access',
        type: 'bar',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Email marketing',
        type: 'bar',
        stack: 'advertising',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Advertising alliance',
        type: 'bar',
        stack: 'advertising',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video ads',
        type: 'bar',
        stack: 'advertising',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Search Engine',
        type: 'bar',
        stack: 'Total',
        data: [862, 1018, 964, 1026, 1679, 1600, 1570],
      },
      {
        name: 'Google',
        type: 'bar',
        barWidth: 12,
        stack: 'search engine',
        data: [620, 732, 701, 734, 1090, 1130, 1120]
      },
      {
        name: 'Safari',
        type: 'bar',
        stack: 'search engine',
        data: [120, 132, 101, 134, 290, 230, 220]
      },
      {
        name: 'Opera',
        type: 'bar',
        stack: 'search engine',
        data: [60, 72, 71, 74, 190, 130, 110]
      },
      {
        name: 'Firefox',
        type: 'bar',
        stack: 'search engine',
        data: [62, 82, 91, 84, 109, 110, 120]
      }
    ]
  };
  getChordchart() {
    this.option = {
      title: {
        text: 'Punch Card of Github',
        link: 'https://github.com/pissang/echarts-next/graphs/punch-card'
      },
      legend: {
        data: ['Punch Card'],
        left: 'right'
      },
      polar: {},
      tooltip: {
        formatter: function (params) {
          return params.value[2] + ' commits in ' + hours[params.value[1]] + ' of ' + days[params.value[0]];
        }
      },
      angleAxis: {
        type: 'category',
        data: hours,
        boundaryGap: false,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#999',
            type: 'dashed'
          }
        },
        axisLine: {
          show: false
        }
      },
      radiusAxis: {
        type: 'category',
        data: days,
        axisLine: {
          show: false
        },
        axisLabel: {
          rotate: 45
        }
      },
      series: [{
        name: 'Punch Card',
        type: 'scatter',
        coordinateSystem: 'polar',
        symbolSize: function (val) {
          return val[2] * 2;
        },
        data: this.data['punchdata'].data,
        animationDelay: function (idx) {
          return idx * 5;
        }
      }]
    };
  }
  ngOnInit() {
    this.zoom = 15;
    this.chartApiservice.getTimelineData().subscribe(Response => {
      this.data = Response;
      this.getChordchart();
    });
  }

  reloadProjectWorkOne() {
    this.blockUIProjectWorkOne.start('Loading..');

    setTimeout(() => {
      this.blockUIProjectWorkOne.stop();
    }, 2500);
  }

  reloadSofiaOrav() {
    this.blockUISofiaOrav.start('Loading..');

    setTimeout(() => {
      this.blockUISofiaOrav.stop();
    }, 2500);
  }

  reloadSofiaOravTwo() {
    this.blockUISofiaOravTwo.start('Loading..');

    setTimeout(() => {
      this.blockUISofiaOravTwo.stop();
    }, 2500);
  }

}