import React, { useState, useRef } from "react"
import styles from "./contact-me.module.css"
import { LuMousePointerClick } from "react-icons/lu";

export default function ContactMeForm() {
  const [opened, setOpened] = useState(false)
  const [contentMoveUp, setContentMoveUp] = useState(false)
  const [openingBehind, setOpeningBehind] = useState(false)
  // const [success, setSuccess] = useState(false)
  const openingRef = useRef<HTMLDivElement>(null)

  function handleSubmit() {
    // form submission logic here
  }

  const toggleOpen = () => {
    if (!opened) {
      setOpened(true)
      setOpeningBehind(false)
  setContentMoveUp(false)
      // Wait for the rotate-opening animation to finish before moving content up
      // The actual moveUp will be handled in onTransitionEnd
    } else {
      setContentMoveUp(false)
      setOpeningBehind(false)
  setTimeout(() => setOpened(false), 1000) // match transition duration
    }
  }

  const handleTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => {
    if (opened && e.propertyName === "transform") {
  setContentMoveUp(true)
      setTimeout(() => setOpeningBehind(true), 10)
    }
    if (!opened && e.propertyName === "transform") {
      setOpeningBehind(false)
    }
  }

  return (
    
    <div className={styles["contact-me"]}>
      <div
        ref={openingRef}
        className={
          [
            styles.opening,
            opened ? styles["rotate-opening"] : "",
            openingBehind ? styles["opening-behind"] : ""
          ].filter(Boolean).join(" ")
        }
        onClick={toggleOpen}
        onTransitionEnd={handleTransitionEnd}
      >
        <LuMousePointerClick/>
      </div>

      <div
        className={[
          styles.content,
          contentMoveUp ? styles["content-moveup"] : ''
        ].filter(Boolean).join(' ')}
      >
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            placeholder="Váš email"
            required
          />
          <textarea
            name="message"
            placeholder="Vaše zpráva"
            required
          />
          <input type="hidden" name="state" />
          <input type="submit"/>
        </form>
      </div>

      <div className={styles.cover}></div>
      <div className={styles.triangle}></div>
    </div>
  )
}
