import Image from "next/image";
import { useEffect, useState } from "react";

import artboard1 from "@/public/img/imsakiye_vakitleri/1.png"
import artboard2 from "@/public/img/imsakiye_vakitleri/2.png"
import CityCard from "../imsakiye/CityCard";

export default function HomePageCard() {

  const [city, setCity] = useState();
  const [times, setTimes] = useState()
  const [cities, setCities] = useState([]);

  var currentTime = new Date();
  var month = currentTime.getMonth() + 1;
  var day = currentTime.getDate();
  const year = currentTime.getFullYear();

  useEffect(() => {
    const getSelectCity = localStorage.getItem("namaz_vakitleri_selected_city");
    if (getSelectCity) {
      setCity(getSelectCity)
    } else {
      setCity('İstanbul');
    }
  }, [])


  useEffect(() => {
    fetch(`https://namaz-vakti.vercel.app/api/timesFromPlace?country=Turkey&region=${city}&city=${city}&date=${year}-${month}-${day}&days=30&timezoneOffset=180`)
      .then((res) => res.json())
      .then((data) => {
        setTimes(data.times)
      })
    localStorage.setItem(
      "namaz_vakitleri_selected_city",
      city
    );
  }, [city])

  useEffect(() => {

    const getCities = localStorage.getItem("namaz_vakitleri_cities");
    if (getCities) {
      setCities(JSON.parse(getCities))
    } else {
      fetch(`https://namaz-vakti.vercel.app/api/regions?country=Turkey`)
        .then((res) => res.json())
        .then((data) => {
          setCities(data)
          localStorage.setItem(
            "namaz_vakitleri_cities",
            JSON.stringify(data)
          );
        })
    }


  }, [])



  return (
    <div className="mb-4">
      <div className="flex justify-between w-full relative z-10 px-3">
        <div><Image src={artboard1} className="object-cover inline-block"
          width={110}
          height={200}
        /></div>
        <h1 className="text-[#243A85] font-sans font-bold text-[22px] text-center flex items-center">
          İllere Göre <br />İftar Saatleri</h1>
        <div><Image src={artboard2} className="object-cover inline-block mt-3"
          width={75}
          height={200}
        /></div>
      </div>

      <div>
        <div className="flex gap-4 bg-[#02144F] justify-between relative -mt-8 z-0 rounded">
          <div>
            <div className="bg-[#243A85] h-16 w-40 text-center text-white flex justify-center items-center text-lg rounded">İmsakiye</div>
          </div>
          <div>
            <div className="bg-[#243A85] h-16  w-40 text-center flex rounded ">
              <select
                defaultValue={city}
                value={city}
                onChange={(e) => {
                  if (e.target.value != 0) {
                    setCity(e.target.value)
                  }
                }}
                className="bg-[#243A85] flex items-center ml-3 text-white leading-6 focus:outline-none focus:ring-0 focus:border-gray-200 "
              >
                {cities.length > 0 && cities?.map((item, index) => (
                  <option key={index} value={item} className="bg-white text-black">
                    {item}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>

        <CityCard city={city} allCities={cities} timeStatus={true} region={city} date={`${year}-${month}-${day}`} />

      </div>

    </div>
  )
}
