"use client";
import React, { useEffect, useState } from "react";
import { FormButton } from "@/app/components/form/forms";
import TextArea from "@/app/components/form/TextArea";

const STORAGE_KEY = "artworkPlacement";

interface Props {
  jumpToNext?: () => void;
}

export default function ArtworkPlacement({ jumpToNext }: Props) {
  const [definePlacement, setDefinePlacement] = useState("");

  useEffect(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
      setDefinePlacement(saved);
    }
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    localStorage.setItem(STORAGE_KEY, definePlacement.trim());
    jumpToNext?.();
  };

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setDefinePlacement(e.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 align-middle">
        <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 text-center md:w-2/3">
          <h2 className="vision">
            Preferred <span className="font-medium">placement</span> for your
            artwork
          </h2>
        </div>

        <div className="cc-vision-wrap">
          <div className="ccvision-scrollcontent">
            <div className="mx-auto mt-15 flex w-full flex-col md:w-[50%]">
              <TextArea
                label=""
                name="definePlacement"
                maxLength={1000}
                placeholder="Type your answer here"
                showLimitMessage={true}
                value={definePlacement}
                onChange={handleChange}
              />
            </div>
          </div>

          <div className="ccBottomBtnWrap">
            <FormButton
              id="btn_cc_save_artwork_placement"
              label="Save"
              type="submit"
              color="gray"
              hairline="blue"
            />
          </div>
        </div>
      </div>
    </form>
  );
}