import { createContext } from "react";
import useFetch from '../hooks/useFetch' // import the useFetch hook


const BASE_URL = 'http://localhost:8000';


const CitiesContext = createContext();



function CitiesProvider({children}){

    // fetch hook for cities => see useFetchCties file
    const {data: cities, loading, error} = useFetch(`${BASE_URL}/cities`);  


    return(
      <CitiesContext.Provider value={{
          cities: cities,
          loading: loading,
          error: error
      }}>

        {children}
      </CitiesContext.Provider>
    )
}

export {CitiesContext, CitiesProvider}

// removes all duplicates of a key in a json array, in this case we create a new const that loops over a cities json array and checks for countries with the same name. it will return only the first instance of that country object where there are multiple of the same country

const countriesUnique = new Set(
  cities.map(city =>
    JSON.stringify({ country: city.country, emoji: city.emoji }),
  ),
)
const countries = [...countriesUnique].map(each => JSON.parse(each))
console.log(countries)

// use Fetch hook file
import { useState, useEffect } from "react";


const useFetchCities = (url) => { // need this url placeholder to put into where the fetch hook is being called


 const [cities, setCities] = useState([]);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);



//fetch for local url => move later to a hook
 useEffect(() => {
      const citiesData = async(url) => {
        setLoading(true)
        try {
          const response = await fetch(url);
          if(!response.ok) return
          
          if(response.status === 200){
            const data = await response.json();
            setCities(data)
            
          }
        
        } catch (error) {
          setError(error)
          setLoading(true)
        }finally{
          setLoading(false)
        }
      }
      citiesData(url)
 
 }, [url]);


 return {cities, loading, error}
}


export default useFetchCities;






//import the hook into another file

// fetch hook for cities => see useFetchCties file
const {cities, loading, error} = useFetchCities(`${BASE_URL}/cities`);

//FavColor.jsx

import React,{useState} from 'react';

const fav=()=>{

const[color,setColor]=useState("red");
  
  return(
<>
    <h1>fav color is {color}</h1>
    <button     type="button"  onClick={()=>setColor("blue")} className="btn1">
    Blue
    </button>

<button type="button"  onClick={()=>setColor("red")}  className="btn2">Red</button>



    </>
  )
}

export default fav;


//App.jsx
import React from 'react';
import FavColor from './FavColor';

export function App() {
  return (
    <div className='App'>
    <FavColor  />

    </div>
  );
}