import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { StationEvent } from '../../../../classes/d3/line.class';
import { StationD3Model } from '../../../../classes/d3/station.class';
import { horizontalInOutReverse } from '../../../../common.animation';
import { hazardLevelColor, hazardLevelOptions } from '../../../manager/hazard/hazard.utils';
import { CommonNzModule } from './../../../../common.nz.module';
import { KnowledgeService } from './../../../../services/knowledge.service';
import { LineAirportComponent } from './../../../../shared/line/airport/airport.component';
import { ControlPanelComponent, ControlSelectOption } from './control-panel/control-panel.component';
import { InfoPanelComponent } from './info-panel/info-panel.component';
import { RiskPanelComponent } from './risk-panel/risk-panel.component';

@Component({
  selector: 'datav-main-metro',
  standalone: true,
  imports: [CommonNzModule, LineAirportComponent, ControlPanelComponent, InfoPanelComponent, RiskPanelComponent],
  templateUrl: './main-metro.component.html',
  styleUrl: './main-metro.component.less',
  animations: [horizontalInOutReverse],
})
export class MainMetroComponent {
  @ViewChild('mainMetroContainer') container!: ElementRef<HTMLDivElement>;
  @ViewChild(InfoPanelComponent) infoPanel!: InfoPanelComponent;
  @Input() headline = '地铁线路';
  @Input() data?: Datav.BoardInfo;

  activeType = 'risk';
  infoPanelVisible = false;
  controlPanelVisible = false;
  riskPanelVisible = false;
  selectedStation?: StationD3Model;

  hazardLevels: ControlSelectOption[] = [];
  riskLevels: ControlSelectOption[] = [];

  currentRiskItems: Knowledge.RiskItem[] = [];
  currentHazardItems: Hazard.HazardDto[] = [];

  filterRiskItems: Knowledge.RiskItem[] = [];
  filterHazardItems: Hazard.HazardDto[] = [];

  constructor(private knowledge: KnowledgeService) {}

  init() {}

  setOptions() {
    this.riskLevels = this.knowledge.levels().map(level => ({
      label: level.value + '风险项',
      value: this.currentRiskItems.filter(item => item.level === level.value).length,
      color: level.colorHex,
      key: level.value,
      checked: true,
    }));

    this.hazardLevels = hazardLevelOptions.map(option => ({
      label: option.label + '隐患',
      value: this.currentHazardItems.filter(item => item.level === option.value).length,
      color: hazardLevelColor[option.value],
      key: option.value,
      checked: true,
    }));

    this.setFilterItems();
  }

  setFilterItems() {
    const riskLevelCheckedMap = new Map(this.riskLevels.filter(item => item.checked).map(item => [item.key, item]));
    this.filterRiskItems = this.currentRiskItems.filter(item => riskLevelCheckedMap.has(item.level));

    const hazardLevelCheckedMap = new Map(this.hazardLevels.filter(item => item.checked).map(item => [item.key, item]));
    this.filterHazardItems = this.currentHazardItems.filter(item => hazardLevelCheckedMap.has(item.level));
  }
  ngOnInit() {
    this.init();
  }

  closeInfoPanel() {
    this.infoPanelVisible = false;
  }

  closeRiskPanel() {
    this.riskPanelVisible = false;
  }

  closeControlPanel() {
    this.controlPanelVisible = false;
  }

  setActiveType(type: string) {
    this.activeType = type;
    this.infoPanelVisible = true;
    this.riskPanelVisible = type === 'risk';
  }
  onCheckPropertyChange(item: ControlSelectOption) {
    item.checked = !item.checked;
    this.setFilterItems();
    // this.infoPanel.reset();
  }
  onAllClick(checked: boolean) {
    if (this.activeType === 'risk') {
      this.riskLevels.forEach(item => (item.checked = checked));
    } else {
      this.hazardLevels.forEach(item => (item.checked = checked));
    }
    this.setFilterItems();
  }
  onRiskPanelPopId(riskItemId: number) {
    this.infoPanel.setRiskItemId(riskItemId);
  }

  onStationEvent(event: StationEvent) {
    const { type, station } = event;
    if (type === 'click') {
      this.handleStationClick(station);
    }
  }
  handleStationClick(station: StationD3Model) {
    // if (station.isShining) {
    if (station.meta.disabled) return;
    if (this.selectedStation) {
      this.selectedStation.selected = false;
    }
    if (this.selectedStation === station) {
      this.hideStationDetail(station);
    } else {
      if (this.infoPanelVisible || this.controlPanelVisible || this.riskPanelVisible) {
        this.hideStationDetail(this.selectedStation!);
        station.selected = true;
        setTimeout(() => {
          this.showStationDetail(station);
        }, 300);
        return;
      }
      station.selected = true;
      this.showStationDetail(station);
    }
    // }
  }
  showStationDetail(station: StationD3Model) {
    this.selectedStation = station;
    this.currentHazardItems = station.hazardIds
      .map(id => this.data?.troubleList.find(item => item.id === id))
      .filter(Boolean) as Hazard.HazardDto[];
    this.currentRiskItems = station.riskItemIds
      .map(id => this.data?.riskPointList.find(item => item.id === id))
      .filter(Boolean) as Knowledge.RiskItem[];
    this.setOptions();
    this.controlPanelVisible = true;
    this.infoPanelVisible = true;
    this.riskPanelVisible = this.isRiskActive;
  }

  hideStationDetail(station: StationD3Model) {
    this.selectedStation = undefined;
    this.infoPanel.closeDetail();
    this.controlPanelVisible = false;
    this.infoPanelVisible = false;
    this.riskPanelVisible = false;
    station.selected = false;
  }

  get isRiskActive() {
    return this.activeType === 'risk';
  }

  get isHazardActive() {
    return this.activeType === 'hazard';
  }
}
