import React from "react"
import styles from "./test-modal.module.scss"
import { useForm, router } from "@inertiajs/react"

interface TestimonialForm {
  name: string
  role: string
  testimony: string
}

interface TestimonialProps {
  closeModal: () => void
  type: "add" | "update"
  testimonial?: Partial<TestimonialForm> & { id?: number }
}

const TestimonialModal: React.FC<TestimonialProps> = ({ closeModal, type, testimonial }) => {
  const { data, setData, post, put, processing, reset } = useForm<TestimonialForm>({
    name: testimonial?.name ?? "",
    role: testimonial?.role ?? "",
    testimony: testimonial?.testimony ?? "",
  })

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    const onSuccess = () => {
      reset("name", "role", "testimony")
      closeModal()
      router.reload({ only: ["flash"] })
    }

    if (type === "add") {
      post(route("testimonials.store"), { onSuccess })
      return
    }

    if (type === "update" && testimonial?.id) {
      put(
        route("testimonials.update", { id: testimonial.id }),
        { onSuccess }
      )
    }
  }

  return (
    <div className={styles["test"]}>
      <div className={styles["test__content"]}>
        <div
          onClick={closeModal}
          className={styles["test__content--close"]}
        >
          Close
        </div>

        <div className={styles["test__content--details"]}>
          <div className={styles["test__content--details--header"]}>
            <div
              className={
                styles["test__content--details--header--helper"]
              }
            >
              {type === "add" ? "Create" : "Update"}
            </div>

            <h2>
              {type === "add" ? "Create FAQ" : "Update FAQ"}
            </h2>

            <p>
              {type === "add"
                ? "Add a new client testimonial for your website."
                : "Update only the fields you wish to change below."}
            </p>
          </div>

          <form onSubmit={handleSubmit}>
            <div>
              <label>Client Name *</label>
              <input
                type="text"
                value={data.name}
                onChange={(e) =>
                  setData("name", e.target.value)
                }
                required
              />
            </div>

            <div>
              <label>Role *</label>
              <input
                placeholder="e.g trader, investor"
                type="text"
                value={data.role}
                onChange={(e) =>
                  setData("role", e.target.value)
                }
                required
              />
            </div>

            <div>
              <label>Testimony *</label>
              <textarea
                value={data.testimony}
                onChange={(e) =>
                  setData("testimony", e.target.value)
                }
                required
              />
            </div>

            <button type="submit" disabled={processing}>
              {processing
                ? type === "add"
                  ? "Adding..."
                  : "Updating..."
                : type === "add"
                ? "Add Testimonial"
                : "Update Testimonial"}
            </button>
          </form>
        </div>
      </div>
    </div>
  )
}

export default TestimonialModal