import globData from '../GlobalData.js';

import locationuser1 from '../APIexamples/locationuser1.json'
import locationuser2 from '../APIexamples/locationuser2.json'
import locationuser3 from '../APIexamples/locationuser3.json'
import locationuser4 from '../APIexamples/locationuser4.json'

import StopSelectButton from './StopSelectButton.js';
import Button from './Button.js';
import disruptIcon from '../img/flash.svg';

class FindStops extends Button {
    state = {
        locations : []
    }
	findStops = () => {
        if(globData.user.deviceId === "1"){
            this.state.locations = locationuser1.LocationList.StopLocation
        }else if (globData.user.deviceId === "2"){
            this.state.locations = locationuser2.LocationList.StopLocation
        }else if (globData.user.deviceId === "3"){
            this.state.locations = locationuser3.LocationList.StopLocation
        }else if (globData.user.deviceId === "4"){
            this.state.locations = locationuser4.LocationList.StopLocation
        }
	}

	render() {
		return (
            <>
                <Button onClick={[this.findStops]} className="disruptBtn">
                    <img src={disruptIcon} alt="" />
                    <span>Select nearby stops</span>
                </Button>
                {this.state.locations.map((item) => 
                    <StopSelectButton stop={item}/>
                )}
            </>
		);
	}
}


export default FindStops;