import { ChangeDetectorRef, Component, inject, Input, signal, SimpleChanges } from '@angular/core';
import { horizontalInOut } from '../../../../common.animation';
import { ApiService } from '../../../../services/api.service';
import { CommonNzModule } from './../../../../common.nz.module';
import { DatavSelectComponent } from './../../../../shared/datav-select/datav-select.component';
import { HazardPanelComponent } from './hazard-panel/hazard-panel.component';
import { PlanPanelComponent } from './plan-panel/plan-panel.component';

@Component({
  selector: 'datav-digital-line-right-panel',
  standalone: true,
  imports: [CommonNzModule, DatavSelectComponent, PlanPanelComponent, HazardPanelComponent],
  templateUrl: './right-panel.component.html',
  styleUrl: './right-panel.component.less',
  animations: [horizontalInOut],
  host: {
    class: 'custom-scroll-bar',
  },
})
export class RightPanelComponent {
  private _cdr = inject(ChangeDetectorRef);
  _zoom = 1;
  @Input() set zoom(value: number) {
    this._zoom = value;
    this._cdr.detectChanges();
  }
  get zoom() {
    return this._zoom;
  }
  @Input() serverTime = '';

  hazardInfo = signal<Datav.HazardStatisticsData | null>(null);

  period = 'month';
  periodOptions = [
    {
      label: '月度',
      value: 'month',
    },
    {
      label: '年度',
      value: 'year',
    },
  ];

  monthOptions: Option<number>[] = [];
  yearOptions: Option<number>[] = [];

  month = new Date(this.serverTime).getMonth() + 1;
  year = new Date(this.serverTime).getFullYear();

  constructor(private api: ApiService) {}
  ngOnInit() {
    this.setOptions(false);
  }

  ngOnChanges(simpleChanges: SimpleChanges) {
    if (simpleChanges['serverTime']) {
      if (this.serverTime) {
        this.month = new Date(this.serverTime).getMonth() + 1;
        this.year = new Date(this.serverTime).getFullYear();
        this.setOptions(true);
        this.fetchHazardStatisticInfo();
      }
    }
  }
  fetchHazardStatisticInfo() {
    this.api.datav.getHazardStatisticInfo(this.year, this.period === 'month' ? this.month : undefined).then(res => {
      this.hazardInfo.set(res);
    });
  }

  handlePeriodChange(period: string) {
    this.period = period;
    if (this.period === 'month') {
      this.month = new Date(this.serverTime).getMonth() + 1;
    } else {
      this.year = new Date(this.serverTime).getFullYear();
    }
    this.fetchHazardStatisticInfo();
  }

  setOptions(isInit = false) {
    this.monthOptions = Array.from({ length: 12 }, (_, i) => ({
      label: `${i + 1}月`,
      value: i + 1,
    }));
    const date = new Date(this.serverTime);
    this.yearOptions = Array.from({ length: isInit ? date.getFullYear() - 2023 : 1 }, (_, i) => ({
      label: `${date.getFullYear() - i}年`,
      value: date.getFullYear() - i,
    })).reverse();
    this.year = this.yearOptions[this.yearOptions.length - 1].value;
    this.month = date.getMonth() + 1;
  }

  handleMonthChange(value: number) {
    this.month = value;
    this.fetchHazardStatisticInfo();
  }
  handleYearChange(value: number) {
    this.year = value;
    this.fetchHazardStatisticInfo();
  }
}
