pollviewer.tsx

"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Prisma } from "@prisma/client";
import Song from './Song';

interface PollProps {
  poll: Prisma.pollsSelect;
}

export default function PollViewer(props: PollProps) {
  function cancelEdit() {
    return null;
  }

  const [projectState, setProjectState] = useState<"view" | "edit">("view");
  const [votedsongs, setVotedsongs] = useState([]);
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
    setFocus,
  } = useForm();
  const poll = props.poll;

  const onSubmit = () => {
    return null;
  };

  function addSong(song) {
    if(votedsongs.length > 3) {
      alert("No way too many songs");
      return;
    }

      return { 
        ...prevState,
        [...prevState.votedsongs, song] 
      }

  }

  return (
    
    <>
      {projectState === "view" && (
        <>
          <table className="table-auto">
            <tbody>
              <tr>
                <th>Slug: </th>
                <td>{poll.slug}</td>
              </tr>
              <tr>
                <th>Name: </th>
                <td>{poll.name}</td>
              </tr>
              <tr>
                <th>Description: </th>
                <td>{poll.description}</td>
              </tr>
              <tr>
                <th>Selectable: </th>
                <td>{poll.selectable}</td>
              </tr>
              <tr>
                <th>Open Date: </th>
                <td>{poll.open_date ? poll.open_date.toString() : ""}</td>
              </tr>
              {poll.close_date && (
                <tr>
                  <th>Close Date: </th>
                  <td>{poll.close_date.toString()}</td>
                </tr>
              )}
              <tr>
                <th>Long Title</th>
                <td>{poll.long_title}</td>
              </tr>
              <tr>
                <th>Twitter Text</th>
                <td>{poll.twitter_text}</td>
              </tr>
            </tbody>
          </table>
          <button
            className="icon-button w-[42px] h-[42px]"
            onClick={() => setProjectState("edit")}
          >
            Edit
          </button>
          <button className="icon-button w-[42px] h-[42px]">Delete</button>
          <div className="flex flex-row flex-wrap space-y-5">
            {poll.songs.map((song) => (
              <Song key={song.id} {...song} clicker={addSong}  />
            ))}
          </div>
        </>
      )}

      {projectState === "edit" && (
        <>
          <h2>Editing {props.poll.name}</h2>
          <form
            onSubmit={handleSubmit(onSubmit)}
            className="flex flex-col space-y-4"
          >
            <div className="flex flex-col ">
              <label htmlFor="slug">Slug</label>
              <input
                type="text"
                defaultValue={poll.slug}
                {...register("slug", { required: true })}
                className="p-0 m-0 list-input flex-1 text-2xl font-bold text-black border-b border-dashed focus:outline-none"
              />
            </div>
            <div className="flex flex-col">
              <label htmlFor="long_title">Long Title</label>
              <textarea
                defaultValue={poll.long_title}
                {...register("long_title", { required: true })}
                className="p-0 m-0 list-input flex-1 text-2xl font-bold text-black border-b border-dashed focus:outline-none"
              />
            </div>
            <textarea
              defaultValue={poll.description}
              {...register("description", { required: true })}
              className="p-0 m-0 list-input flex-1 text-2xl font-bold text-black border-b border-dashed focus:outline-none"
            />
            <input
              type="datetime-local"
              defaultValue={poll.open_date}
              {...register("open_date", { required: true })}
              className="p-0 m-0 list-input flex-1 text-2xl font-bold text-black border-b border-dashed focus:outline-none"
            />
            <div className="flex gap-4">
              <button className="icon-button" type="submit" role="submit">
                Submit
              </button>
              <button
                className="icon-button"
                onClick={() => setProjectState("view")}
              >
                Cancel
              </button>
            </div>
          </form>
        </>
      )}
    </>
  );
}