import NavBar from '../../components/NavBar'
import {useRouter} from "next/router";
import { useId, useState, useEffect, useMemo } from 'react';
import Select from 'react-select'
import countryList from 'react-select-country-list'
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'

export default function addSchoolForm() {
    const { query } = useRouter();
    const [countryValue, setCountryValue] = useState('')
    const options = useMemo(() => countryList().getData(), [])
    const [phoneValue, setphoneValue] = useState()
    const [allStates, setAllStates] = useState([])
    const [allCities, setAllCities] = useState([])

  const handleSelectAllStates = stateCode => {
    setAllCities([])
    fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`)
    .then(res => res.json())
      .then(data => {
        // console.log("handleSelectAllStates:", data, options)
        let newData = data && data.length > 0 && data.map(n => {
          return {
            label: n.name,
            value: n.name
          }
        })
        setAllCities(newData)
      })
  }
  const selectCountry = countryValue => {
    setAllStates([])
    fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${countryValue.value}`)
    .then(res => res.json())
      .then(data => {
        // console.log("countryValue:", data, options)
        let newData = data && data.length > 0 && data.map(n => {
          return {
            label: n.name,
            value: n.iso2
          }
        })
        setAllStates(newData)
        setAllCities([])
      })
    setCountryValue(countryValue)
  }
    // console.log(phoneValue)
    // const selectCountry = countryValue => {
    //         setCountryValue(countryValue)
    // }
    const handleSubmit = async (event) => {
      event.preventDefault()
      const data = {
        "status":"published",
        name: event.target.schoolName.value,
        country: event.target.country.value,
        state: event.target.state.value,
        cities: event.target.cities.value,
        anual: event.target.anual.value,
        toddlers: event.target.toddlers.value,
        early_start_programme: event.target.early_start_programme.value,
        interakto: event.target.interakto.value,
        agreement_expiry_date: event.target.agreement_expiry_date.value,
        school_agreement: event.target.school_agreement.value,
        school_contact_number: event.target.school_contact_number.value,
        school_email_id: event.target.school_email_id.value,

      }
      const JSONdata = JSON.stringify(data)
      // console.log(data)
      const endpoint = 'https://management.beanstalkedu.com/items/school'
      const options = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSONdata,
      }
      const response = await fetch(endpoint, options)
  
      const result = await response.json()
    //   alert(`Is this your full name: ${result.data}`)
      alert(`School Saved`)
    }
    const [school, setUser] = useState([]);
    const fetchData = async () => {
        const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published");
        const data = await response.json();
        return setUser(data.data[0]);
      }
      // console.log(school.name)
    
      useEffect(() => {
        fetchData();
      },[])
    
    return (
        <main> 
            <div>
            <NavBar />
            <div>
      <h1>Items page</h1>
      <p>{query.id}</p>
      <p>{query.name}</p>
    </div>
            <section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
                <div className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
                    <div className='flex flex-col justify-center place-items-center'>
                        <img src="/img/1.svg" alt="" />
                        <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information</p>
                    </div>
                    <form onSubmit={handleSubmit} className='w-full px-6 md:px-20'>
                    <div className='flex flex-col w-full'>
                        <label htmlFor="school" className='text-xl font-bold'>School Name</label>
                        <input type="text" name="schoolName"value={school.name}  placeholder='School Name' className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
                    </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="school_email_id" className='text-xl font-bold'> Email ID</label>
                        <input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
                    </div>
                    <div className='flex flex-col w-full'>
                <label htmlFor="country" className='text-xl font-bold'>Country</label>
                <Select
                  className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
                  name="country" instanceId={useId()} options={options} value={countryValue}
                  onChange={selectCountry}/>
              </div>
              {allStates && allStates.length > 0 && 
              <div className='flex flex-col w-full'>
                <label htmlFor="state" className='text-xl font-bold'>State</label>
                <Select
                  className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
                  name="state" options={allStates} value={allStates[0].name}
                  onChange={handleSelectAllStates}/>
              </div>}
              {
                allCities && allCities.length > 0 && 
                <div className='flex flex-col w-full'>
                  <label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
                  <Select
                    className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
                    name="cities" options={allCities} value={allCities[0].name}
                    // onChange={() => {}}
                  />
                </div>}
                    <div className='flex flex-col w-full'>
                        <label htmlFor="phone" className='text-xl font-bold'> Phone</label>
                        <PhoneInput className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="phone" placeholder="Enter phone number" value={phoneValue} onChange={setphoneValue}/>
                    </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="anual" className='text-xl font-bold'>Anual</label>
                        <select name="anual" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
                            <option value="0" >-NA-</option>
                            <option value="January">January</option>
                            <option value="February">February</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="August">August</option>
                            <option value="September">September</option>
                            <option value="October">October</option>
                            <option value="November">November</option>
                            <option value="December">December</option>
                        </select>
                    </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
                        <select  name="toddlers" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
                            <option value="0" >-NA-</option>
                            <option value="January">January</option>
                            <option value="February">February</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="August">August</option>
                            <option value="September">September</option>
                            <option value="October">October</option>
                            <option value="November">November</option>
                            <option value="December">December</option>
                        </select>
                    </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
                        <select name="early_start_programme" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
                            <option value="0" >-NA-</option>
                            <option value="January">January</option>
                            <option value="February">February</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="August">August</option>
                            <option value="September">September</option>
                            <option value="October">October</option>
                            <option value="November">November</option>
                            <option value="December">December</option>
                        </select>
                    </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
                        <select name="interakto" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
                            <option value="na">-NA-</option>
                            <option value="January">    January</option>
                            <option value="February">   February</option>
                            <option value="March">      March</option>
                            <option value="April">      April</option>
                            <option value="May">        May</option>
                            <option value="June">       June</option>
                            <option value="July">       July</option>
                            <option value="August">     August</option>
                            <option value="September">  September</option>
                            <option value="November">   November</option>
                            <option value="December">   December</option>
                        </select>
                    </div>
                    <div className='flex flex-col w-full'>
                        <label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
                        <input type="date" name="agreement_expiry_date" id="agreement_expiry_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
                    </div>
                    {/* <div className='flex flex-col w-full'>
                        <label htmlFor="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
                        <input type="file" name="school_agreement" id="school_agreement" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
                    </div> */}
                    <div className='flex justify-center pt-8'>
                        {/* <a href="/school-list"><button type='submit' className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Submit Now</button></a> */}
                        <input type="submit" value="Update" className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer' />
                    </div>
                    </form>
                </div>
            </section>
            </div>
        </main>
    )
  }