// 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'

const typeParent = "parent"

export default function addUserForm() {
  const [allLanguage, setLanguage] = useState([
    {lang: "Assamese", value: false},
    {lang: "Bengali", value: false},
    {lang: "English", value: false},
    {lang: "Hindi", value: false},
    {lang: "Telegu", value: false},
    {lang: "Punjabi", value: false},
    {lang: "Malayalam", value: false},
    {lang: "Tamil", value: false},
    {lang: "Kannada", value: false},
    {lang: "Gujrati", value: false},
  ])
  // console.log(allLanguage)
  const [currentType, setCurrentType] = useState(typeParent)
  const [countryValue, setCountryValue] = useState('')
  const options = useMemo(() => countryList().getData(), [])
  const [phoneValue, setphoneValue] = useState()
  let [individualValue = true, setindividualValue] = 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)
  }

  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()
    console.log(event.target.lang.checked)
    const data = {
      "status": "published",
      type: event.target.type.value,
      uname: event.target.uname.value,
      country: event.target.country.value,
      state: event.target.state.value ? event.target.state.value:"",
      city: event.target.city.value ? event.target.city.value:"",
      phone: event.target.phone.value,
      email: event.target.email.value,
      school: event.target.schoolID.value,
      klas: event.target.klas.value,
      lang: allLanguage,
      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.value,
      early_start_programme: event.target.early_start_programme.value,
      toddlers: event.target.toddlers.value,
      interakto: event.target.interakto.value,
    }
    const JSONdata = JSON.stringify(data)
    const endpoint = '/api/addUsers'
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSONdata,
    }
    const response = await fetch(endpoint, options)
    const result = await response.json()
    // console.log(result)
    // alert(`Is this your full name: ${result}`)
  }
  const handleOnLanguageChange = (e, v) => {
    let idx = allLanguage.findIndex(o => o.lang === e.target.value);
    let newAllLang = [...allLanguage]
    newAllLang[idx].value = true
    // console.log(newAllLang)

    if ([typeParent, "teacher"].includes(currentType)) {
      let counter = 0
      newAllLang.forEach((n, idx) => {
        if (n.value) {
          counter++
        }
      })
      if (counter >= 2) {
        newAllLang.forEach((n, idx) => {
          newAllLang[idx].disabled = true
        })
      }
    }
    setLanguage(newAllLang)
  }
  const handleTypeOnChange = (e) => {
    let newAllLang = [...allLanguage]
    newAllLang.forEach((n, idx) => {
      newAllLang[idx].value = false
      newAllLang[idx].disabled = false
    })
    const { name, checked } = e.target;
    setLanguage({ ...allLanguage, [name]: checked });

    // setLanguage(newAllLang)
    setCurrentType(e.target.value)
  }
  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" onChange={handleTypeOnChange} className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
                  <option value={typeParent}>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="uname"
                       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>
              {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="city" className='text-xl font-bold'>City</label>
                  <Select
                    className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
                    name="city" 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="" 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="0"> 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="klas"
                        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="Jan">Jan</option>
                      <option value="Feb">Feb</option>
                      <option value="Mar">Mar</option>
                      <option value="Apr">Apr</option>
                      <option value="May">May</option>
                      <option value="Jun">Jun</option>
                      <option value="Jul">Jul</option>
                      <option value="Aug">Aug</option>
                      <option value="Sept">Sept</option>
                      <option value="Oct">Oct</option>
                      <option value="Nov">Nov</option>
                      <option value="Dec">Dec</option>
                    </select>
                  </div>
                  <div className='flex flex-col w-full pt-4'>
                    <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Programme</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="Jan">Jan</option>
                      <option value="Feb">Feb</option>
                      <option value="Mar">Mar</option>
                      <option value="Apr">Apr</option>
                      <option value="May">May</option>
                      <option value="Jun">Jun</option>
                      <option value="Jul">Jul</option>
                      <option value="Aug">Aug</option>
                      <option value="Sept">Sept</option>
                      <option value="Oct">Oct</option>
                      <option value="Nov">Nov</option>
                      <option value="Dec">Dec</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="Jan">Jan</option>
                      <option value="Feb">Feb</option>
                      <option value="Mar">Mar</option>
                      <option value="Apr">Apr</option>
                      <option value="May">May</option>
                      <option value="Jun">Jun</option>
                      <option value="Jul">Jul</option>
                      <option value="Aug">Aug</option>
                      <option value="Sept">Sept</option>
                      <option value="Oct">Oct</option>
                      <option value="Nov">Nov</option>
                      <option value="Dec">Dec</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="0">-NA-</option>
                      <option value="Jan">Jan</option>
                      <option value="Feb">Feb</option>
                      <option value="Mar">Mar</option>
                      <option value="Apr">Apr</option>
                      <option value="May">May</option>
                      <option value="Jun">Jun</option>
                      <option value="Jul">Jul</option>
                      <option value="Aug">Aug</option>
                      <option value="Sept">Sept</option>
                      <option value="Oct">Oct</option>
                      <option value="Nov">Nov</option>
                      <option value="Dec">Dec</option>
                    </select>
                  </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'>
                    {/* <label className='cursor-pointer' htmlFor="Assamese"> Assamese </label> &nbsp; <input type="checkbox" name="lang" value="Assamese" className='check-box'/> <br />
                    <label className='cursor-pointer' htmlFor="Bengali"> Bengali </label> &nbsp; <input type="checkbox" name="lang" value="Bengali" className='check-box'/> <br />
                    <label className='cursor-pointer' htmlFor="English"> English </label> &nbsp; <input type="checkbox" name="lang" value="English" className='check-box'/> <br />
                    <label className='cursor-pointer' htmlFor="Hindi"> Hindi </label> &nbsp; <input type="checkbox" name="lang" value="Hindi" className='check-box'/> <br />
                    <label className='cursor-pointer' htmlFor="Telegu"> Telegu </label> &nbsp; <input type="checkbox" name="lang" value="Telegu" className='check-box'/> <br />
                    <label className='cursor-pointer' htmlFor="Punjabi"> Punjabi </label> &nbsp; <input type="checkbox" name="lang" value="Punjabi" className='check-box'/> <br />
                    <label className='cursor-pointer' htmlFor="Malayalam"> Malayalam </label> &nbsp; <input type="checkbox" name="lang" value="Malayalam" className='check-box'/> <br />
                    <label className='cursor-pointer' htmlFor="Tamil"> Tamil </label> &nbsp; <input type="checkbox" name="lang" value="Tamil" className='check-box'/> <br />
                    <label className='cursor-pointer' htmlFor="Kannada"> Kannada </label> &nbsp; <input type="checkbox" name="lang" value="Kannada" className='check-box'/> <br />
                    <label className='cursor-pointer' htmlFor="Gujrati"> Gujrati </label> &nbsp; <input type="checkbox" name="lang" value="Gujrati" className='check-box'/> <br /> */}
                      {allLanguage && allLanguage.length && allLanguage.map(n => {
                        return (
                          <div key={n.lang} className=''>
                            <label className='cursor-pointer'
                                   htmlFor="assamese">{n.lang}</label>&nbsp;
                            <input type="checkbox" disabled={n.disabled} name="lang" value={n.lang} checked={n.value}
                                   onChange={handleOnLanguageChange}
                                   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="Jan"> Jan</option>
                      <option value="Feb"> Feb</option>
                      <option value="Mar"> Mar</option>
                      <option value="Apr"> Apr</option>
                      <option value="May"> May</option>
                      <option value="Jun"> Jun</option>
                      <option value="Jul"> Jul</option>
                      <option value="Aug"> Aug</option>
                      <option value="Sept"> Sept</option>
                      <option value="Nov"> Nov</option>
                      <option value="Dec"> Dec</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>
  )
}
