import { Component, OnInit } from '@angular/core';
import {
  ApexAxisChartSeries,
  ApexChart,
  ApexTheme,
  ApexTooltip,
  ApexGrid,
  ApexYAxis,
  ApexLegend,
  ApexStroke
} from 'ng-apexcharts';
import { NewsService } from 'src/app/services/news.service';
import { WallPostService } from 'src/app/services/wall-post.service';
import { FileService } from 'src/app/services/file.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  chart: ApexChart = {
    height: 350,
    type: 'area',
    zoom: {
      enabled: false
    },
    background: 'transparent',
    foreColor: '#fff',
    toolbar: {
      show: false
    },
  };

  series: ApexAxisChartSeries = [
    {
      name: 'Series 1',
      data: [45, 52, 38, 24, 33]
    }
  ];

  theme: ApexTheme = {
    palette: 'palette5',
    monochrome: {
      enabled: false,
      color: '#00000',
      shadeTo: 'light',
      shadeIntensity: 0.65
    },
  };

  grid: ApexGrid = {
    show: true,
    yaxis: {
      lines: {
        show: false
      }
    },
    xaxis: {
      lines: {
        show: false
      }
    }
  };

  yaxis: ApexYAxis = {
    crosshairs: {
      show: true
    }
  };

  tooltip: ApexTooltip = {
    theme: 'dark'
  };

  labels =  [
    'Po',
    'Út',
    'St',
    'Čt',
    'Pá',
  ];

  stroke: ApexStroke = {
    curve: 'smooth'
  };
// line
  lineChart: ApexChart = {
    height: 350,
    type: 'line',
    zoom: {
      enabled: false
    },
    background: 'transparent',
    foreColor: '#fff',
    toolbar: {
      show: false
    },
  };

  lineSeries: ApexAxisChartSeries = [
    {
      name: 'Roky',
      data: [0.1, 1.2, 1.4, 1.7]
    }
  ];

  lineTheme: ApexTheme = {
    palette: 'palette10',
    monochrome: {
      enabled: false,
      color: '#00000',
      shadeTo: 'light',
      shadeIntensity: 0.65
    },
  };

  //news
  news;
  wallPosts;
  dashboardDocuments;

  lineLabels =  [
    '2010',
    '2011',
    '2012',
    '2013'
  ];

  constructor(private newsService: NewsService,
     private wallService: WallPostService,
     private fileService: FileService
     ) { }

  ngOnInit() {
    this.news = this.newsService.getDashboardNews();
    this.wallPosts = this.wallService.getThreeWallPosts();
    this.fileService.getDashboardDocumets(10).subscribe(documents => this.dashboardDocuments = documents);
  }

}