import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ContentChild, TemplateRef } from '@angular/core';
import { NzRangePickerComponent } from 'ng-zorro-antd';
import * as moment from 'moment';
import {
    FormBuilder,
    FormGroup,
    Validators,
    FormControl
  } from '@angular/forms';

import { CmI18nService, zh, en } from '../../service/i18n.service';
@Component({
    selector: 'cm-datepicker-shortcut',
    templateUrl: './cmDatePickerShortcut.component.html',
    styleUrls: ['./cmDatePickerShortcut.component.less'],
    providers:[FormBuilder]
})
export class CmDatePickerShortcutComponent implements OnInit, OnDestroy {
    validateForm: FormGroup;
    _dateRange:any = [null,null];
    zh = zh;
    en = en;
    lang: string;
    _cmShowTime:boolean = false;
    _cmShortcutDate:object = {
        data:[
            {
                value: 0,
                name: '今天'
            },
            {
                value: 1,
                name: '昨天'
            },
            {
                value: 7,
                name: '近7天'
            }
        ],
        type:'inline'
    };
    _cmFormate:string = "YYYY-MM-DD";
    clickShortcut:Object = {
        clicked: false,
        currentShortcut: 0
    };

    @ContentChild(TemplateRef) template: TemplateRef<any>;

    @Input()
    set cmShortcutDate(cmShortcutDate:object){
        this._cmShortcutDate = cmShortcutDate;
        if(this._cmShortcutDate['data'] && this._cmShortcutDate['data'].length > 0){
            this.clickShortcut['currentShortcut'] = this._cmShortcutDate['data'][0]['value'];
        }
    };

    @Input()
    set cmFormate(cmFormate:string){
        this._cmFormate = cmFormate;
        
    };

    @Input()
    set cmShowTime(cmShowTime:boolean){
        this._cmShowTime = cmShowTime;
    };

    @Output() onDateChange = new EventEmitter<any>();

    constructor(public i18n: CmI18nService, private fb: FormBuilder) {
        this.i18n.missionLang$.subscribe(lang => {
            this.lang = lang;
        })
    }
    

    ngOnInit() {
        let that = this;
        this.i18n.use(this.i18n.defaultLang);
        this.validateForm = this.fb.group({
            date: null,
          });
        this.changeDate();
    }

    changeDate() {
        const dateControl = this.validateForm.get('date');
        dateControl.valueChanges.forEach(
          (value: any) => {
            if(!this.clickShortcut['clicked']){
                if(this._cmShortcutDate['data'] && this._cmShortcutDate['data'].length > 0){
                    this.clickShortcut['currentShortcut'] = this._cmShortcutDate['data'][0]['value'];
                }
            }
            let obj = {
                "startDate": moment(value[0]).isValid() ? moment(value[0]).format(this._cmFormate) : null,
                "endDate":  moment(value[1]).isValid() ? moment(value[1]).format(this._cmFormate) : null
            }
            this.onDateChange.emit(obj)
            this.clickShortcut['clicked'] = !this.clickShortcut['clicked'];
          }
        );
      }

    shortcut(date:number) {
        this.clickShortcut['clicked'] = true;
        if(date >= 0){
            let now = new Date();
            let startDate = new Date(now.getTime() - date*24*60*60*1000);
            let endDate = date <= 0 ? now : new Date(now.getTime() - 1*24*60*60*1000)
    
            this._dateRange = [startDate, endDate]
        }
    }

    ngOnDestroy() {

    }

}