import { LightningElement, wire, track } from 'lwc';
import performCallout from '@salesforce/apex/insuranceReadyTest2.performCallout';
import stateperformCallout from '@salesforce/apex/getState.stateperformCallout';
import cityperformCallout from '@salesforce/apex/getCities.cityperformCallout';

export default class InsuranceReady extends LightningElement {
    @wire(performCallout) countries;
    @track selectedCountryIso2;
    @track selectedStateIso2;
    @track error;
    @wire(stateperformCallout, { country: '$selectedCountryIso2' })
    wiredstateperformCallout({ error, data }) {
        if (data) {
            this.states = data;
            this.error = undefined;
            console.log("States :",JSON.stringify(data));
        } else if (error) {
            this.error = error;
            this.states = undefined;
            console.error("Error :",error);
        }
    }
     @wire(cityperformCallout, { country: '$selectedCountryIso2',state:'$selectedStateIso2' })
    wiredcityperformCallout({ error, data }) {
        if (data) {
            this.cities = data;
            this.error = undefined;
            console.log("Cities :",JSON.stringify(data));
        } else if (error) {
            this.error = error;
            this.states = undefined;
            console.error("Error :",error);
        }
    }
    @track selectedState = '';
    @track selectedCity='';
    handleCountryChange(event) {
        const selectedCountry = event.target.value;
        this.selectedCountryIso2 = event.detail.value;
        console.log("Country ISO2 :",this.selectedCountryIso2);
    }
    handleStateChange(event) {
        this.selectedState = event.detail.value;
        this.selectedStateIso2 = event.detail.value;
        console.log("State ISO2 :",this.selectedStateIso2);
    }
    handleCityChange(event) {
        const selectedCity = event.target.value;
    }
       

    get countryOptions() {
        if (this.countries.data) {
            return this.countries.data.map(country => {
                return { label: country.name, value: country.iso2 };
            });
        }
    }
    get stateOptions() {
        console.log(this.states);
    if (this.states) {
        return this.states.map(state => {
            return { value: state.name, label: state.iso2 };
        });
    }
    }
    get cityOptions() {
if (this.cities) {
return this.cities.map(city => {
return { label: city.name, value: city.name };
});
}
}
    


connectedCallback() {
        if (!this.states) {
            console.log('No states data returned');
        } else {
            console.log("States :",JSON.stringify(this.states));
        }
    }
}

HTML CODE:

<template>
    <div>
        <template if:true={countries.data}>
            <lightning-combobox options={countryOptions} value={selectedCountryIso2} onchange={handleCountryChange}>
            </lightning-combobox>
        </template>
        
        <template if:true={selectedCountryIso2}>
         
            <lightning-combobox
            name="stateSelect" 
            label="Select a State"
            options={stateOptions}
            value={selectedStateIso2}
            onchange={handleStateChange}>
    </lightning-combobox>
   
</template>
     <template if:true={selectedCountryIso2}>
    <template if:true={selectedStateIso2}>
        <lightning-combobox
            name="citySelect" 
            label="Select a City"
            value={selectedCity}
            options={cityOptions}>
        </lightning-combobox>
    </template>
</template>
    </div>
     
</template>