/*
 * Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { ScrollIntoViewService } from '../../shared/scroll-into-view.service';
import {
  Template,
  TemplateGroup,
} from '@bci-web-core/web-components/dist/types/components/datetime-picker/datetime-picker.interface';

@Component({
  selector: 'bci-datepicker-demo',
  templateUrl: 'datepicker-demo.html',
  styleUrls: ['datepicker-demo.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DatepickerDemoComponent {
  touch: boolean;
  filterOdd: boolean;
  yearView: boolean;
  inputDisabled: boolean;
  datepickerDisabled: boolean;
  minDate: Date;
  maxDate: Date;
  startAt: Date;
  date: Date;
  lastDateInput: Date | null;
  lastDateChange: Date | null;
  dateCtrl = new FormControl();
  dateInputCtrl = new FormControl();
  selectedDate: any;
  dateTimePickerDateStart: string;
  dateTimePickerTimeStart: string;
  label: string;

  bciDisabled: boolean;
  bciLabel = "Date/Time"
  bciPlaceholder = "Set a date and time"
  bciTemplatesDisabled: boolean;
  bciHide?: 'calendar' | 'time' | 'initial' = 'initial';

  constructor(public scrollIntoViewService: ScrollIntoViewService) {}

  private get todayTimestamps() {
    const date = new Date();
    date.setHours(0, 0, 0, 0);
    const timestampStart = date.getTime();
    date.setHours(23, 59, 59, 999);
    const timestampEnd = date.getTime();

    return { timestampStart, timestampEnd };
  }

  templateQuickButton: {
    root: Template[];
  } = {
    root: [
      {
        id: 'today',
        label: 'Today',
        calculateTemplate: () => {
          return {
            timestampStart: Date.now(),
            timestampEnd: Date.now(),
          };
        },
      },
    ]
  }

  templates: {
    root: Template[];
    groups: Array<Template | TemplateGroup>;
  } = {
    root: [
      {
        id: 'lasthour',
        label: 'Last hour',
        calculateTemplate: () => {
          return {
            timestampStart: Date.now() - 60 * 60 * 1000,
            timestampEnd: Date.now(),
          };
        },
        liveUpdates: true,
        refreshInterval: 5000,
      },
      {
        id: 'last8hours',
        label: 'Last 8 hours',
        calculateTemplate: () => {
          return {
            timestampStart: Date.now() - 8 * 60 * 60 * 1000,
            timestampEnd: Date.now(),
          };
        },
      },
    ],
    groups: [
      {
        id: 'today',
        label: 'Today',
        calculateTemplate: () => {
          return this.todayTimestamps;
        },
      },
      {
        label: 'Live Updating',
        templates: [
          {
            id: 'lasthour',
            label: 'Last hour',
            calculateTemplate: () => {
              return {
                timestampStart: Date.now() - 60 * 60 * 1000,
                timestampEnd: Date.now(),
              };
            },
            liveUpdates: true,
            refreshInterval: 5000,
          },
          {
            id: 'last8hours',
            label: 'Last 8 hours',
            disabled: true,
            calculateTemplate: () => {
              return {
                timestampStart: Date.now() - 8 * 60 * 60 * 1000,
                timestampEnd: Date.now(),
              };
            },
            liveUpdates: true,
            refreshInterval: 5000,
          },
          {
            id: 'last12hours',
            label: 'Last 12 hours',
            calculateTemplate: () => {
              return {
                timestampStart: Date.now() - 12 * 60 * 60 * 1000,
                timestampEnd: Date.now(),
              };
            },
            liveUpdates: true,
            refreshInterval: 5000,
          },
          {
            id: 'last24hours',
            label: 'Last 24 hours',
            calculateTemplate: () => {
              return {
                timestampStart: Date.now() - 24 * 60 * 60 * 1000,
                timestampEnd: Date.now(),
              };
            },
            liveUpdates: true,
            refreshInterval: 5000,
          },
        ],
      },
      {
        label: 'Since last',
        disabled: true,
        templates: [
          {
            id: 'prodOut',
            label: 'Production Outage',
            calculateTemplate: () => {
              return {
                timestampStart: Date.now() - 60 * 60 * 1000,
                timestampEnd: Date.now(),
              };
            },
            liveUpdates: true,
            refreshInterval: 5000,
          },
          {
            id: 'break',
            label: 'Break',
            calculateTemplate: () => {
              return {
                timestampStart: Date.now() - 60 * 60 * 1000,
                timestampEnd: Date.now(),
              };
            },
            liveUpdates: true,
            refreshInterval: 5000,
          },
        ],
      },
    ],
  };

  dateFilter = (date: Date) => date.getMonth() % 2 === 1 && date.getDate() % 2 === 0;

  onDateInput = (e: MatDatepickerInputEvent<Date>) => (this.lastDateInput = e.value);
  onDateChange = (e: MatDatepickerInputEvent<Date>) => (this.lastDateChange = e.value);

  dateSelected($event: any) {
    this.selectedDate = $event.detail;
  }

  setDateTimePickerTodayEight() {
    this.dateTimePickerDateStart =
      new Date().getDate().toString().padStart(2, '0') +
      '.' +
      new Date().getMonth().toString().padStart(2, '0') +
      '.' +
      new Date().getFullYear().toString();
    this.dateTimePickerTimeStart = '08:00:00';
  }
}
