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

const STORAGE_KEY = "DesribeVision";

export default function DescribeVision({
  onSkip,
  jumpToNext,
}: StepComponentProps) {
  const [shortVision, setShortVision] = useState("");

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

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

  return (
    <>
      <div className="mx-auto flex w-full flex-col items-center justify-center gap-10 align-middle">
        <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 text-center md:w-[50%]">
          <h2 className="font-light">
            Describe your <span className="font-medium">vision</span>
          </h2>
          <p className="text-xs/4 font-light md:text-sm">
            Share your preferences in color, fabric, highlight design, or any
            personal touches you have in mind.
          </p>
        </div>

        <div className="cc-vision-wrap">
          <div className="ccvision-scrollcontent">
            <div className="mx-auto mt-10 flex w-full flex-col md:w-[50%]">
              <TextArea
                label=""
                name="dyv_sort_intro"
                maxLength={1000}
                placeholder="Tell us something about your vision"
                showLimitMessage={true}
                required={false}
                value={shortVision}
                onChange={(e) => {
                  const value = e.target.value;
                  setShortVision(value);
                  localStorage.setItem(STORAGE_KEY, value);
                }}
              />
            </div>
          </div>
          <div className="ccBottomBtnWrap">
            <FormButton
              id="btn_submit_vision"
              label="Save vision"
              type="submit"
              color="gray"
              hairline="blue"
              onClick={handleSubmit}
            />
          </div>
        </div>
      </div>
    </>
  );
}