import { getWishes, postWishes } from "@/api/wishes";
import { WishesResponse } from "@/models/wishes";
import { useEffect, useState } from "react";

interface WishesFormProps {
  id: number;
  name: string;
}

export default function WishesForm({ id, name }: Readonly<WishesFormProps>) {
  const [nameWisher, setNameWisher] = useState(name);
  const [newWish, setNewWish] = useState("");
  const [open, setOpen] = useState(false);
  const [submited, setSubmited] = useState(false);
  const [wishes, setWishes] = useState([] as WishesResponse[]);

  useEffect(() => {
    async function fetchData() {
      const response = await getWishes();
      const result = await response.json();

      if (!response.ok) {
        console.log(result.error);
      }

      setWishes(result);
    }

    fetchData().catch(console.error);
  }, [submited]);

  function handleBeforeSubmit() {
    if (nameWisher == "" || newWish == "") {
      return;
    }

    setOpen(true);
  }

  async function handleSend() {
    try {
      const response = await postWishes({
        id_user: id,
        name: nameWisher,
        wishes: newWish,
      });

      const result = await response.json();

      if (!response.ok) {
        console.log(result.error);
      } else {
        setOpen(false);
        setNewWish("");
        setSubmited((prev) => !prev);
      }
    } catch (error) {
      console.log(`Error: ${error}`);
    }
  }

  return (
    <>
      <div className="grow"></div>
      <div className="flex flex-col grow ml-5 text-white w-[65vw] z-10">
        {"Nama:"}
        <input
          className="bg-white mt-1 mb-2 px-2 py-1 rounded-full text-black"
          name="name"
          onChange={(event) => setNameWisher(event.target.value)}
          type="text"
          value={nameWisher}
        />
        {"Wishes:"}
        <textarea
          className="bg-white mt-1 mb-2 px-2 py-1 rounded-xl text-black"
          name="wishes"
          onChange={(event) => setNewWish(event.target.value)}
          rows={3}
          style={{ resize: "none" }}
          value={newWish}
        />
        <button
          className="bg-white font-semibold mt-1 px-2 py-1 rounded-full text-black shadow-sm/50"
          onClick={handleBeforeSubmit}
          type="button"
        >
          {"Send"}
        </button>
        <div className="flex flex-col grow pt-4 pb-[3vh] overflow-y-hidden">
          <div className="grow overflow-y-scroll">
            {0 < wishes.length &&
              wishes.map((value) => (
                <div
                  className="border-b-[1px] border-white mb-2 pb-2"
                  key={value.id}
                >
                  <div className="font-semibold">{value.name}</div>
                  <span>{value.wishes}</span>
                </div>
              ))}
          </div>
        </div>
      </div>
      {open && (
        <div className="fixed flex h-screen w-screen items-center justify-center p-2 top-0 z-20">
          <button
            className="fixed h-screen w-screen bg-black/50 top-0 left-0"
            onClick={() => setOpen(false)}
            style={{ cursor: "default" }}
            type="button"
          />
          <div className="bg-white gap-4 items-center justify-center px-6 py-[1.25rem] rounded-xl text-left w-full max-w-lg z-20">
            <div className="font-bold mb-[1.25rem] text-lg">{"Confirm"}</div>
            <div className="mb-2">{"Are you sure want to send this?"}</div>
            <div>{`"${newWish}"`}</div>
            <div className="flex gap-3 justify-end px-1.5 pt-12 w-full">
              <button
                className="border-[1px] border-red-600 font-semibold px-6 py-2.5 rounded-full text-red-600 hover:text-red-500 hover:shadow"
                onClick={() => setOpen(false)}
                type="button"
              >
                {"Cancel"}
              </button>
              <button
                className="bg-blue-600 font-semibold px-6 py-2.5 rounded-full text-white hover:bg-blue-500"
                onClick={handleSend}
                type="button"
              >
                {"Send"}
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}