"use client";
import React, { useRef, useState, useEffect } from "react";
import TextArea from "@/app/components/form/TextArea";
import type { StepComponentProps } from "../wizardTypes";
import { FormButton } from "@/app/components/form/forms";
import DynamicImageUploader, {
  DynamicImageUploaderRef,
} from "../../DynamicImageUploader";

const limit = 3;

const STORAGE_KEY = "shareReferenceNote";

export default function UploadSilhouette({ jumpToNext }: StepComponentProps) {
  const uploaderRef = useRef<DynamicImageUploaderRef>(null);
  const [referenceNote, setReferenceNote] = useState("");

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

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

  return (
    <>
      <div className="mx-auto flex w-full flex-col items-center justify-center gap-8 align-middle">
        <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 text-center md:w-[50%]">
          <h2 className="vision">
            <span className="font-medium">Upload</span> any reference images of
            the <span className="font-medium">piece</span>
          </h2>
          <p className="text-xs/4 font-light md:text-sm">
            This could be a sketch, a photo, or anything that helps us
            understand your idea more clearly.
          </p>
        </div>
        <div className="cc-vision-wrap">
          <div className="ccvision-scrollcontent">
            <div className="mx-auto mt-4 flex w-full flex-col md:w-[50%]">
              <DynamicImageUploader
                storageId="visionReferenceImages"
                ref={uploaderRef}
                limit={limit}
                showDescription={true}
                showArtistName={false}
                showSource={true}
                uploadMessage={(count, limit) =>
                  `Upload ${count} of ${limit} reference image${limit > 1 ? "s" : ""}`
                }
              />
            </div>
            <div>
              <div className="mx-auto mt-10 flex w-full flex-col md:w-[50%]">
                <TextArea
                  label=""
                  name="dyv_sort_intro"
                  maxLength={1000}
                  placeholder="Or just share your artwork visions with words"
                  showLimitMessage={true}
                  required={false}
                  value={referenceNote}
                  onChange={(e) => {
                    const value = e.target.value;
                    setReferenceNote(value);
                    localStorage.setItem(STORAGE_KEY, value);
                  }}
                />
              </div>
            </div>
          </div>

          <div className="ccBottomBtnWrap">
            <FormButton
              id="btn_cc_save_reference"
              label="Save Reference"
              type="submit"
              color="gray"
              hairline="blue"
              onClick={handleSubmit}
            />
          </div>
        </div>
      </div>
    </>
  );
}