import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BreadcrumbService } from '@core/breadcrumb';
import { Config } from '@core/config';
import { DisplayInfoDTO } from '@swagger/eis';
import { DateAdapter } from '@ui/common';
import { TaskCalendarStore } from '../../task-calendar.store';

@Component({
  selector: 'page-tasks',
  templateUrl: 'tasks.component.html',
  styleUrls: ['tasks.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TasksComponent implements OnInit {
  readonly selectedDate$ = this.taskCalendarStore.selectSelectedDate;

  readonly displayedDate$ = this.taskCalendarStore.selectDisplayedDate;

  readonly indicators$ = this.taskCalendarStore.selectCalendarIndicators;

  readonly items$ = this.taskCalendarStore.selectDisplayInfos;

  readonly minDate = this.dateAdapter.addCalendarMonths(this.dateAdapter.today(), -6);

  readonly maxDate = this.dateAdapter.addCalendarMonths(this.dateAdapter.today(), 6);

  constructor(
    private taskCalendarStore: TaskCalendarStore,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private dateAdapter: DateAdapter,
    private breadcrumb: BreadcrumbService,
    private readonly _config: Config
  ) {}

  ngOnInit() {
    const displayDate = this.activatedRoute.snapshot.queryParams.displayDate;
    const selectedDate = this.activatedRoute.snapshot.queryParams.selectedDate;
    if (displayDate || selectedDate) {
      this.setSelectedAndDisplayedDate({
        displayDate: displayDate ? new Date(this.activatedRoute.snapshot.queryParams.displayDate) : undefined,
        selectedDate: selectedDate ? new Date(this.activatedRoute.snapshot.queryParams.selectedDate) : undefined,
      });
    } else {
      this.updateBreadcrumb({});
    }

    this.taskCalendarStore.setMode({ mode: 'week' });
    this.taskCalendarStore.loadItems();
  }

  setSelectedAndDisplayedDate({ displayDate, selectedDate }: { displayDate?: Date; selectedDate?: Date }) {
    const queryParams = this.activatedRoute.snapshot.queryParams;

    if (displayDate && selectedDate) {
      this.taskCalendarStore.setSelectedDate({ date: selectedDate });
      this.taskCalendarStore.setDisplayedDate({ date: displayDate });
      this.taskCalendarStore.loadItems();
      this.router.navigate([], {
        queryParams: { displayDate: displayDate?.toJSON(), selectedDate: selectedDate?.toJSON() },
      });
      this.updateBreadcrumb({ displayDate, selectedDate });
    }

    if (selectedDate) {
      this.taskCalendarStore.setSelectedDate({ date: selectedDate });
      this.taskCalendarStore.setDisplayedDate({ date: selectedDate });
      this.router.navigate([], {
        queryParams: { ...queryParams, selectedDate: selectedDate?.toJSON() },
      });
      this.updateBreadcrumb({ selectedDate });
    }

    if (displayDate) {
      this.taskCalendarStore.setDisplayedDate({ date: displayDate });
      this.taskCalendarStore.loadItems();
      this.router.navigate([], {
        queryParams: { ...queryParams, displayDate: displayDate?.toJSON() },
      });
      this.updateBreadcrumb({ displayDate });
    }
  }

  open(item: DisplayInfoDTO) {
    this.taskCalendarStore.open(item);
  }

  updateBreadcrumb({ displayDate, selectedDate }: { displayDate?: Date; selectedDate?: Date }) {
    const queryParams = this.activatedRoute.snapshot.queryParams;
    this.breadcrumb.addOrUpdateBreadcrumbIfNotExists({
      key: this._config.get('process.ids.taskCalendar'),
      name: 'Tätigkeitskalender',
      path: '/filiale/task-calendar/tasks',
      tags: ['task-calendar'],
      section: 'branch',
      params: {
        selectedDate: selectedDate ? selectedDate.toISOString() : queryParams.selectedDate,
        displayDate: displayDate ? displayDate?.toISOString() : queryParams.displayDate,
      },
    });
  }
}
