import {Component} from '@angular/core';
import {Location} from '@angular/common';
import {RouteParams} from '@angular/router-deprecated';
import {BlogService} from '../../../../data/fixtures/blog-service';
import {Blog} from '../../../../data/models/blog';
import {MetaData} from 'app/services/metadata'
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {BlogDetailsComponent} from '../detail/component';

@Component({
  moduleId: module.id,
  selector: 'blog',
  templateUrl: './template.html',
  providers: [BlogService, MetaData],
  directives: [ROUTER_DIRECTIVES, BlogDetailsComponent]
})
export class BlogComponent {
  blogs: Blog[];
  blog: Blog;
  listExpanded: boolean = true;

  loc: any;
  window: any;
  metadata: any;

  constructor(
    private w: Window,
    location: Location,
    params: RouteParams,
    public metadataService: MetaData,
    public blogService: BlogService) {
      this.loc = location;
      this.window = w;
      this.metadata = metadataService;

      this.listExpanded = this.IsWidescreen();

      let id = params.get('id');
      this.blogs = blogService.get();
      if(!id) {
        id = this.blogs[0].id;
      }
      this.blog = blogService.find(id);
    }

    IsWidescreen(): boolean {
      return this.window.document.documentElement.clientWidth > 1400;
    }
    IsMobileDisplay(): boolean {
      return this.window.document.documentElement.clientWidth < 600;
    }

    drawerClick() {
      this.listExpanded = !this.listExpanded;
    }

      // Set metadata
      this.metadata.setTitle(`${b.title} | Evan Kirsch`);
      this.metadata.setMeta('keywords', b.content.tags);
      this.metadata.setMeta('description', b.shortContent);

      if (this.IsMobileDisplay()) {
        this.listExpanded = false;
      }
    }

    ListState(): string {
      if (this.listExpanded) {
        return "is-active";
      }
      return "is-inactive";
    }

    DisplayState(): string {
      if (this.listExpanded) {
        return "expanded";
      }
      return "collapsed";
    }
}

    Select(b: Blog) {
      this.blog = b;
      this.loc.go(`blogs/${b.id}`);
