// https://management.beanstalkedu.com/items/school
// import React from 'react';
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'


import NavBar from '../components/NavBar';
// import { Inter } from 'next/font/google'

export default function addUserForm (){
    const [countryValue, setCountryValue] = useState('')
    const options = useMemo(() => countryList().getData(), [])
    const [phoneValue, setphoneValue] = useState()
    let [individualValue=true, setindividualValue] = useState()

// console.log(phoneValue)
    const selectCountry = countryValue => {
        setCountryValue(countryValue)
    }

    const individual = (event) => {
        // console.log(event.target.schoolID.value)

        setindividualValue(individualValue=false)
    }
    const [school, setSchool] = useState(null);
    useEffect(() => {
        fetch(`https://management.beanstalkedu.com/items/school`).
            then(res => res.json())
            .then(data => {
                setSchool(data)
                
            })
    }, [])
     // console.log(school);

    const handleFormsubmit = async (event) => {
        event.preventDefault()
        const data = {
          "status":"published", 
          type: event.target.type.value,
          name: event.target.name.value,
          user: event.target.email.value,
          country: event.target.country.value,
          phone: event.target.phone.value,
          school: event.target.schoolID.value,
          class: event.target.class.value,
          lang: event.target.lang.value,
          start_month: event.target.start_month.value,
          start_date: event.target.start_date.value,
          end_date: event.target.end_date.value,
          anual: event.target.anual,
        }
        const JSONdata = JSON.stringify(data)
        const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user'
        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}`)
      }
  return (
    <main> 
        <div>
        <NavBar />
        <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/2.svg" alt="" />
                    <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>User Registration Form</p>
                </div>
                <form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
                <div className='flex flex-col w-full pt-4'>
                    <label htmlFor="class" className='text-xl font-bold'>Type</label>
                    <select name="type" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
                        <option value="parent" >Parent</option>
                        <option value="teacher">Teacher</option>
                        <option value="coordinator">Coordinator</option>
                        <option value="master">Master</option>
                    </select>
                </div>
                <div className='flex flex-col w-full'>
                    <label htmlFor="name" className='text-xl font-bold'> Name</label>
                    <input type="text" name="name" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' placeholder='Enter your Name' />
                </div>
                <div className='flex flex-col w-full'>
                    <label htmlFor="email" className='text-xl font-bold'>Email</label>
                    <input type="email" name="email" placeholder='ex. xyz@email.com' 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>
                <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="" className='text-xl font-bold'>School name</label>
                    <select name="schoolID"  onChange={individual}  className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
                        <option value="individual"> individual </option>
                        {school && school.data.map(data=> 
                            <option value={data.id} key={data.id}>{data.name}</option>                        
                            )}
                    </select>
                </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="class" className='text-xl font-bold'>Class</label>
                        <select name="class" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
                            <option value="0" >-Select-</option>
                            <option value="IK1">IK1</option>
                            <option value="IK2">IK2</option>
                            <option value="IK3">IK3</option>
                            <option value="PG">PG</option>
                        </select>
                    </div>
                { individualValue &&
                    <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="plan" className='text-xl font-bold'>Plan</label>
                            <div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2 '>
                                <div className='flex flex-row place-items-center'>
                                    <label className='cursor-pointer'  htmlFor="Anual">Anual</label>&nbsp;
                                    <input type="checkbox" name="plan" id="Anual" value='Anual' className='check-box'/>
                                </div>
                                <div className='flex flex-row place-items-center'>
                                    <label className='cursor-pointer' htmlFor="Toddler">Toddler</label>&nbsp;
                                    <input type="checkbox" name="plan" id="Toddler" value='Toddler' className='check-box'/>
                                </div>
                                <div className='flex flex-row place-items-center'>
                                    <label className='cursor-pointer' htmlFor="Interakto">Interakto</label>&nbsp;
                                    <input type="checkbox" name="plan" id="Interakto" value='Interakto' className='check-box'/>
                                </div>
                                <div className='flex flex-row place-items-center col-span-2'>
                                    <label className='cursor-pointer md:whitespace-nowrap' htmlFor="Early_Start_program">Early Start Program</label>&nbsp;
                                    <input type="checkbox" name="plan" id="Early_Start_program" value='Early_Start_program' className='check-box'/>
                                </div>
                            </div>
                        </div> */}
                        <div className='flex flex-col w-full pt-4'>
                            <label htmlFor="lang" className='text-xl font-bold'>Language</label>
                            <div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2'>
                                <div className=''>
                                    <label className='cursor-pointer'  htmlFor="assamese">Assamese</label>&nbsp;
                                    <input type="checkbox" name="lang" value='Bengali' className='check-box'/>
                                </div>
                                <div className=''>
                                    <label className='cursor-pointer'  htmlFor="bengali">Bengali</label>&nbsp;
                                    <input type="checkbox" name="lang" value='Bengali' className='check-box'/>
                                </div>
                                <div className=''>
                                    <label className='cursor-pointer' htmlFor="english">English</label>&nbsp;
                                    <input type="checkbox" name="lang" value='English' className='check-box'/>
                                </div>
                                <div className=''>
                                    <label className='cursor-pointer' htmlFor="hindi">Hindi</label>&nbsp;
                                    <input type="checkbox" name="lang" value='Hindi' className='check-box'/>
                                </div>
                                <div className=''>
                                    <label className='cursor-pointer' htmlFor="telegu">Telegu</label>&nbsp;
                                    <input type="checkbox" name="lang" value='telegu' className='check-box'/>
                                </div>
                                <div className=''>
                                    <label className='cursor-pointer' htmlFor="Punjabi">Punjabi</label>&nbsp;
                                    <input type="checkbox" name="lang" value='Punjabi' className='check-box'/>
                                </div>
                                <div className=''>
                                    <label className='cursor-pointer' htmlFor="malayalam">Malayalam</label>&nbsp;
                                    <input type="checkbox" name="lang" value='malayalam' className='check-box'/>
                                </div>
                                <div className=''>
                                    <label className='cursor-pointer' htmlFor="tamil">Tamil</label>&nbsp;
                                    <input type="checkbox" name="lang"  value='tamil' className='check-box'/>
                                </div>
                                <div className=''>
                                    <label className='cursor-pointer' htmlFor="kannada">Kannada</label>&nbsp;
                                    <input type="checkbox" name="lang"  value='kannada' className='check-box'/>
                                </div>
                                <div className=''>
                                    <label className='cursor-pointer' htmlFor="gujrati">Gujrati</label>&nbsp;
                                    <input type="checkbox" name="lang" value='gujrati' className='check-box'/>
                                </div>
                            </div>
                        </div>
                        <div className='flex flex-col w-full pt-4'>
                            <label htmlFor="start_month" className='text-xl font-bold'>Start Month</label>
                            <select name="start_month" id="start_month" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
                                <option value="0" >-Select-</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="start_date" className='text-xl font-bold pt-4'>Start Date</label>
                            <input type="date" name="start_date" id="start_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="end_date" className='text-xl font-bold pt-4'>Subscription Expiry Date.</label>
                            <input type="date" name="end_date" id="end_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
                        </div>
                    </div>
                }
                <div className='flex justify-center pt-8'>
                    <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'>Save</button>
                    {/* <input type="submit" value="Submit Now" 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>
  )
}
