import { Component, OnInit, Query } from '@angular/core';
import {
  GetAppointments,
  GetAppointmentsGQL,
  HealthSystemStatusesGQL,
  ApptChartDataGQL,
  ApptChartData,
  ApptCalendarMonth,
  ApptCalendarSidebar,
  ApptCalendarMonthGQL,
  ApptCalendarSidebarGQL,
  ApptQueue,
  ApptQueueGQL,
  ChangeApptStatusGQL,
  GetSinglePatientGQL,
  GetSinglePatient,
} from '../../generated/graphql';
import { Subscription } from 'rxjs';
import gql from 'graphql-tag';
import { QueryRef } from 'apollo-angular';
import { isEqual, format, getMonth, getDay, getYear, getDate } from 'date-fns';
import { PusherService } from 'src/app/services/pusher.service';
import { NzMessageService } from 'ng-zorro-antd';

@Component({
  selector: 'app-appointment-requests',
  templateUrl: './appointment-requests.page.html',
  styleUrls: ['./appointment-requests.page.scss'],
})
export class AppointmentRequestsPage implements OnInit {
  loading: boolean = true;
  status_ids: Array<any>;
  // heatlh_system_statuses
  statuses: any;
  statuses_subscription: Subscription;
  statuses_loading: boolean = true;
  // appointments
  today_appointments: any;
  appointments_queue_query: QueryRef<ApptQueue.Query, ApptQueue.Variables>;
  appointments_queue_sub: Subscription;
  appointments_display_data: Array<any> = [];
  // filtering
  listOfFilterStatus = [
    { text: 'Joe', value: 'Joe' },
    { text: 'Jim', value: 'Jim' }
  ];
  sortValue = null;
  sortKey = null;
  // pagination
  pageIndex: number = 1;
  pageSize: number;
  total: number;
  searchStatusList: number[] = [];
  // editing
  editCache = {};
  // chart
  chart_query: QueryRef<ApptChartData.Query, ApptChartData.Variables>;
  chart_query_sub: Subscription;
  chart_data: any[];
  colorScheme = {
    domain: ['#1d68fb', '#33c0fc', '#4afffe', '#afffff', '#fffc63', '#fdbd2d']
  };
  chart_view: any[] = undefined;
  // calendar
  selectedDate = new Date();
  selectedMonth = getMonth(new Date()) + 1;
  selectedDay = getDate(new Date());
  selectedYear = getYear(new Date());
  appt_month_query: QueryRef<ApptCalendarMonth.Query, ApptCalendarMonth.Variables>;
  appt_month_data: any[] = [];
  appt_month_sub: Subscription;
  appt_sidebar_query: QueryRef<ApptCalendarSidebar.Query, ApptCalendarSidebar.Variables>;
  appt_sidebar_sub: Subscription;
  appt_sidebar_data: any[] = [];
  appt_sidebar_loading: boolean = true;
  // drawer
  detail_drawer_visible = false;
  detail_id: string = null;
  detail_data: GetSinglePatient.Patient = null;


  constructor(
    private getStatuses: HealthSystemStatusesGQL,
    private getAppointments: GetAppointmentsGQL,
    private getChartData: ApptChartDataGQL,
    private getApptMonth: ApptCalendarMonthGQL,
    private getApptSidebar: ApptCalendarSidebarGQL,
    private getQueue: ApptQueueGQL,
    private changeAppt: ChangeApptStatusGQL,
    private Pusher: PusherService,
    private message: NzMessageService,
    private getPatient: GetSinglePatientGQL
  ) { }

  ngOnInit() {
    this.getStatuses.watch({}, {
      fetchPolicy: 'network-only'
    }).valueChanges.subscribe(result => {
      console.log('statuses', result);
      this.listOfFilterStatus = result.data.statuses.data.map(item => {
        return {
          text: item.status_name,
          value: item.id
        };
      });
      this.statuses_loading = result.loading;
      this.statuses = result.data.statuses.data;
      // this.status_ids = result.data.statuses.data.map(item => item.id);
      // should only fetch In-Queue appts
      this.status_ids = [1];

      this.fetchChartData();
      // this.fetchAppointments();
      this.fetchQueue();
      this.fetchApptCalendarMonth();
      this.fetchApptCalendarDay();
    });

    this.Pusher.channel.bind('App\\Events\\DataUpdated', data => {
      console.log('pusher data', data);
      this.message.loading('Refreshing data', { nzDuration: 1000 });
      this.appointments_queue_query.refetch({ page_index: this.pageIndex });
      this.fetchChartData();
      this.fetchApptCalendarMonth();
    });
  }


  selectDateChange(select: Date): void {
    console.log(`Select value: ${select}`);
    if (this.selectedMonth !== getMonth(select) + 1) {
      console.log('different month rerun query');
      this.selectedMonth = getMonth(select) + 1;
      this.selectedDay = getDate(select);
      this.fetchApptCalendarMonth();
    }

    this.selectedMonth = getMonth(select) + 1;
    this.selectedDay = getDate(select);
    this.selectedYear = getYear(select);
    this.fetchApptCalendarDay();
  }


  isDateEqual(date_1: string, date_2: string) {
    const format_date_1 = format(
      date_1,
      'MM/DD/YYYY'
    );

    const format_date_2 = format(
      date_2,
      'MM/DD/YYYY'
    );

    return isEqual(
      format_date_1,
      format_date_2
    );
  }


  fetchAppointments() {
    this.getAppointments.watch({ status_ids: this.status_ids, page_index: this.pageIndex }, { fetchPolicy: 'network-only'}).valueChanges.subscribe(result => {
      console.log('appointments', result);
      this.loading = result.loading;
      this.appointments_display_data = result.data.appointments.data.appointments;
      this.pageIndex = result.data.appointments.data.current_page;
      this.pageSize = result.data.appointments.data.appointments.length;
      this.total = result.data.appointments.data.total;
      this.updateEditCache();
    });
  }

  fetchQueue() {
    this.loading = true;
    this.appointments_queue_query = this.getQueue.watch({ page_index: this.pageIndex }, { fetchPolicy: 'network-only' });

    this.appointments_queue_sub = this.appointments_queue_query.valueChanges.subscribe(result => {
      console.log('appointments queue', result);

      if (!result.data.queue.data.appointments) {
        this.appointments_display_data = [];
        this.pageIndex = 1;
        this.pageSize = 0;
        this.total = 0;
        this.updateEditCache();
        this.loading = false;
        return;
      }

      this.loading = result.loading;
      this.appointments_display_data = result.data.queue.data.appointments;
      this.pageIndex = result.data.queue.data.current_page;
      this.pageSize = result.data.queue.data.appointments.length;
      this.total = result.data.queue.data.total;
      this.updateEditCache();
      this.loading = false;
    });
  }

  fetchApptCalendarMonth() {
    console.log(this.selectedMonth, this.selectedDay, this.selectedYear, new Date());
    this.appt_month_query = this.getApptMonth.watch({
      status_ids: this.status_ids,
      page_index: this.pageIndex,
      year: this.selectedYear,
      month: this.selectedMonth
    }, {
      fetchPolicy: 'network-only'
    });

    this.appt_month_sub = this.appt_month_query.valueChanges.subscribe(result => {
      console.log('appt_month_query', result);
      this.appt_month_data = result.data.appointments_month_view.data.appointments;
    });
  }

  fetchApptCalendarDay() {
    this.appt_sidebar_loading = true;
    this.appt_sidebar_query = this.getApptSidebar.watch({
      status_ids: this.status_ids,
      page_index: this.pageIndex,
      year: this.selectedYear,
      month: this.selectedMonth,
      day: this.selectedDay
    }, {
      fetchPolicy: 'network-only'
    });

    this.appt_sidebar_sub = this.appt_sidebar_query.valueChanges.subscribe(result => {
      console.log('appt_sidebar_query', result);
      this.appt_sidebar_loading = result.loading;
      this.appt_sidebar_data = result.data.appointments_day_view.data.appointments;
    });
  }

  fetchChartData() {
    this.chart_query = this.getChartData.watch({}, {
      fetchPolicy: 'network-only'
    });
    this.chart_query_sub = this.chart_query.valueChanges.subscribe(result => {
      console.log(result);
      this.chart_data = result.data.appointment_chart_data.data.statuses;
    });
  }

  sort(sort: { key: string, value: string }): void {
    this.sortKey = sort.key;
    this.sortValue = sort.value;
    this.searchData();
  }

  searchData(reset: boolean = false): void {
    if (reset) {
      this.pageIndex = 1;
    }

    this.loading = true;

    this.appointments_queue_query.fetchMore({
      variables: {
        page_index: this.pageIndex
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) { return prev; }

        console.log(fetchMoreResult.queue);
        this.loading = false;
        this.total = fetchMoreResult.queue.data.total;
        this.appointments_display_data = fetchMoreResult.queue.data.appointments;
        this.updateEditCache();
      },
    });
  }

  updateFilter(value: number[]): void {
    this.searchStatusList = value;
    this.searchData(true);
  }

  startEdit(id: string): void {
    this.editCache[ id ].edit = true;
  }

  cancelEdit(id: string): void {
    const index = this.appointments_display_data.findIndex(item => item.id === id);
    this.editCache[ id ] = {
      data: { ...this.appointments_display_data[ index ] },
      edit: false
    };
  }

  saveEdit(id: string): void {
    const index = this.appointments_display_data.findIndex(item => item.id === id);
    const status_id = this.statuses.filter(item => item.status_name === this.editCache[id].data.status)[0].id;
    const appt_id = this.editCache[id].data.id;
    Object.assign(this.appointments_display_data[ index ], this.editCache[ id ].data);
    this.changeApptStatus(appt_id, status_id);
    this.editCache[ id ].edit = false;
  }

  updateEditCache(): void {
    this.appointments_display_data.forEach(item => {
      this.editCache[ item.id ] = {
        edit: false,
        data: { ...item }
      };
    });
  }

  openDetail(id, patient_id) {
    console.log(id, patient_id);
    this.detail_drawer_visible = true;
    this.detail_data = patient_id;
    this.getPatient.fetch({ id: patient_id }).subscribe(result => {
      console.log(result);
      this.detail_data = result.data.patient;
    });
  }

  closeDetail() {
    this.detail_drawer_visible = false;
    this.detail_data = null;
    // unsub from appt query
  }

  changeApptStatus(appt_id, status_id) {
    this.loading = true;
    this.changeAppt.mutate({
      id: appt_id,
      status_id: status_id
    }).subscribe(result => {
      console.log(result);
      if (result.data.changeAppointmentStatus.success) {
        this.loading = false;
        this.appointments_queue_query.refetch();
        this.chart_query.refetch();
      }
    });
  }
}