import { Component, OnInit } from '@angular/core';
import { BuscarLocalidadeService } from 'src/app/services/buscarunidade/buscar-localidade.service';
import { BuscarUnidadeService } from 'src/app/services/buscarunidade/buscar-unidade.service';

@Component({
  selector: 'app-buscarunidade',
  templateUrl: './buscarunidade.component.html',
  styleUrls: ['./buscarunidade.component.css']
})
export class BuscarunidadeComponent implements OnInit {
  estados: any[] = [];
  cidades: any[] = [];
  selectedEstadoId: number | undefined;
  selectedCidadeId: number | undefined;
  unidadesDeSaude: any[] = [];
  unidades: { title: string; description: string; }[] = [];
  unidadeSelecionada: { title: string; description: string; } | null = null;
  constructor(
    private buscarLocalidadeService: BuscarLocalidadeService,
    private buscarUnidadeService: BuscarUnidadeService
    ) { }

  ngOnInit() {
    this.buscarLocalidadeService.getEstados().subscribe((data) => {
      this.estados = data;
    });
  }

  onEstadoChange() {
    if (this.selectedEstadoId) {
      this.buscarLocalidadeService.getCidades(this.selectedEstadoId).subscribe((data) => {
        this.cidades = data;
      });
    } else {
      this.cidades = [];
      this.unidadesDeSaude = [];
    }
  }

  listarUnidades(){
    this.unidades = [
      { title: 'UPA - Unidade de pronto-atendimento', description: 'Rua exemplo, 608, centro, Itapeva-SP' },
      { title: 'UBS - Unidade Básica de Saúde - Jardim Maringá', description: 'Rua exemplo2, Jardim Maringá, Itapeva-SP' },
      { title: 'UBS - Unidade Básica de Saúde - Parque São Jorge', description: 'Rua exemplo3, Parque São Jorge, Itapeva-SP' },
      { title: 'UBS - Unidade Básica de Saúde - Santa Maria', description: 'Rua exemplo4, Santa Maria, Itapeva-SP' },
      { title: 'UBS - Unidade Básica de Saúde - Jardim Virgínia', description: 'Rua exemplo5, Jardim Virgínia, Itapeva-SP' }
    ];
  }
  selecionarUnidade(unidade: { title: string; description: string; }) {
    this.unidadeSelecionada = unidade;
  }
}


// código api google maps -------------------------------------------------------------------------------------------
//   apiLoaded: boolean = false;

//   constructor(private buscarUnidadeService: BuscarUnidadeService) {}

//   ngOnInit(): void {
//     this.loadGoogleMapsScript();
//   }

//   private loadGoogleMapsScript(): void {
//     const script = document.createElement('script');
//     script.src = `https://maps.googleapis.com/maps/api/js?AIzaSyBTkf2qgAplsW7BDcsWxr7n01cfGrdhP0A&callback=initMap`;
//     script.onload = () => {
//       this.apiLoaded = true;
//       this.buscarUnidadeService.initializeMap();
//     };
//     document.head.appendChild(script);
//   }

//   buscarUnidades(): void {
//     this.buscarUnidadeService.buscarUnidades();
//   }
// }
