import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {environment} from '../../../environments/environment';


@Component({
  selector: 'app-region-selector',
  templateUrl: './region-selector.component.html',
  styleUrls: ['./region-selector.component.less']
})
export class RegionSelectorComponent implements OnInit, OnChanges {

  selectedLabel = '';
  @Input()
  selectedRegionId: string = null;
  @Output() selectedRegionIdChange = new EventEmitter();
  @Input()
  selectLevel = 4;
  isVisible = false;
  selectedCity: any = null;
  selectedRegion: any = null;
  selectedStreet: any = null;
  selectedCommunity: any = null;
  cityData = [];
  regionData = [];
  streetData = [];
  communityData = [];

  constructor(private httpClient: HttpClient) {
  }

  ngOnInit() {
    this.httpClient.get(environment.baseUrl + '/common/getRegionsByParentId').subscribe(data => {
      this.cityData = data['return_data'];
    });
    this.loadSelectedRegionInfo();
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.loadSelectedRegionInfo();
  }

  loadSelectedRegionInfo() {
    if (this.selectedRegionId) {
      this.httpClient.get(environment.baseUrl + '/common/getParentInfosByRegionId?regionId=' + this.selectedRegionId).subscribe(data => {
        if (data['return_data']) {
          if (data['return_data']['city']) {
            this.selectedLabel = data['return_data']['city']['regionName'];
          }
          if (data['return_data']['region']) {
            this.selectedLabel = this.selectedLabel + '/' + data['return_data']['region']['regionName'];
          }
          if (data['return_data']['street']) {
            this.selectedLabel = this.selectedLabel + '/' + data['return_data']['street']['regionName'];
          }
          if (data['return_data']['community']) {
            this.selectedLabel = this.selectedLabel + '/' + data['return_data']['community']['regionName'];
          }
        }
      });
    } else {
      this.selectedLabel = null;
    }
  }

  getChildrentRegions(region: any, level: number): void {
    this.httpClient.get(environment.baseUrl + '/common/getRegionsByParentId?regionId=' + region.regionId).subscribe(data => {
      if (level === 0) {
        this.regionData = data['return_data'];
        this.selectedRegion = null;
        this.selectedStreet = null;
        this.selectedCommunity = null;
      } else if (level === 1) {
        this.streetData = data['return_data'];
        this.selectedStreet = null;
        this.selectedCommunity = null;
      } else if (level === 2) {
        this.communityData = data['return_data'];
        this.selectedCommunity = null;
      }
    });
  }

  showModal(): void {
    this.isVisible = true;
  }

  handleOk(): void {
    if (this.selectedCity) {
      this.selectedLabel = this.selectedCity.regionName;
      this.selectedRegionId = this.selectedCity.regionId;
    }
    if (this.selectedRegion) {
      this.selectedLabel = this.selectedLabel + '/' + this.selectedRegion.regionName;
      this.selectedRegionId = this.selectedRegion.regionId;
    }
    if (this.selectedStreet) {
      this.selectedLabel = this.selectedLabel + '/' + this.selectedStreet.regionName;
      this.selectedRegionId = this.selectedStreet.regionId;
    }
    if (this.selectedCommunity) {
      this.selectedLabel = this.selectedLabel + '/' + this.selectedCommunity.regionName;
      this.selectedRegionId = this.selectedCommunity.regionId;
    }
    this.selectedRegionIdChange.emit(this.selectedRegionId);
    this.isVisible = false;
  }

  handleCancel(): void {
    this.isVisible = false;
  }
}
