"use client";

import LayoutAdmin from "@/components/organisms/LayoutAdmin";
import React, { useEffect, useState } from "react";
import { FaApple } from "react-icons/fa";

import { getData, postData, putData } from "@/server/interceptor";
import { getErrorMessage } from "@/utils/helpers";
import {
  ContentState,
  EditorState,
  convertFromHTML,
  convertToRaw,
} from "draft-js";
import draftToHtml from "draftjs-to-html";
import dynamic from "next/dynamic";
import { useParams, useRouter } from "next/navigation";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { BiShield } from "react-icons/bi";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

const Editor = dynamic(
  () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
  { ssr: false }
);

export default function EditTermConditionPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const [editorStates, setEditorStates] = useState({
    content: EditorState.createEmpty(),
  });

  const [formData, setFormData] = useState({
    title: "",
    content: "",
    isActive: true,
  });
  const [errors, setErrors] = useState<
    { parameter: string; message: string }[]
  >([]);
  const [loading, setLoading] = useState(false);

  const onEditorStateChange =
    (field: string) => (newEditorState: EditorState) => {
      setEditorStates((prevState) => ({
        ...prevState,
        [field]: newEditorState,
      }));

      setFormData({
        ...formData,
        [field]: draftToHtml(convertToRaw(newEditorState.getCurrentContent())),
      });
    };

  // Handle input changes
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { id, value, type, checked } = e.target;

    setFormData((prevData) => ({
      ...prevData,
      [id]: type === "checkbox" ? checked : value,
    }));
  };

  const convertHTMLToContentState = (htmlString: string) => {
    const blocksFromHTML = convertFromHTML(htmlString);
    const contentState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    );
    return contentState;
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const MySwal = withReactContent(Swal);
    setLoading(true);
    try {
      // Send data to API
      await putData(`/terms-conditions/${id}`, formData);
      await MySwal.fire({
        icon: "success",
        title: "Berhasil!",
        text: "Syarat dan Ketentuan berhasil diubah.",
      });
      router.push("/terms-conditions");
    } catch (error: any) {
      setErrors(error?.response?.data?.errors || []);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    document.title = "Ubah Syarat dan Ketentuan - Admin";
    const fetchTermCondition = async () => {
      try {
        const response = await getData(`/terms-conditions/${id}`);
        const term = response;
        setFormData({
          title: term.title,
          content: term.content,
          isActive: term.isActive,
        });

        setEditorStates((prevState) => ({
          ...prevState,
          content: EditorState.createWithContent(
            convertHTMLToContentState(term.content)
          ),
        }));
      } catch (error: any) {
        console.error(error?.response?.data?.message);
      }
    };
    fetchTermCondition();
  }, [id]);

  return (
    <LayoutAdmin>
      <div className="flex justify-between mb-3">
        <h1 className="text-2xl font-semibold text-gray-900 flex items-center">
          <BiShield className="inline-block text-4xl text-gray-500 ml-2" />
          <span className="ml-4">Ubah Syarat dan Ketentuan</span>
        </h1>
      </div>
      <form
        onSubmit={handleSubmit}
        // jika loading true
        // disabled
        // className="max-w bg-white shadow-lg rounded-lg p-6"
        className="max-w bg-white shadow-lg rounded-lg p-6"
      >
        <div className="space-y-6">
          {/* Form Row for Product Name */}
          <div className="grid grid-cols-2 gap-4">
            <div className="col-span-2">
              <label
                htmlFor="title"
                className="block mb-2 text-sm font-medium text-gray-900"
              >
                Judul
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                  <FaApple className="text-gray-500" />
                </div>
                <input
                  type="text"
                  id="title"
                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5"
                  placeholder="Masukkan Nama Produk"
                  value={formData.title}
                  onChange={handleChange}
                />
              </div>
              {getErrorMessage(errors, "title") && (
                <small className="block mt-1 text-red-600">
                  {getErrorMessage(errors, "title")}
                </small>
              )}
            </div>
            <div className="col-span-2">
              <label
                htmlFor="content"
                className="block mb-2 text-sm font-medium text-gray-900"
              >
                Deskripsi Produk
              </label>
              <div className="relative">
                <div className="border border-gray-300 rounded-lg bg-white p-4 min-h-[300px] focus-within:ring-2 focus-within:ring-blue-500">
                  <Editor
                    editorState={editorStates.content}
                    wrapperClassName="demo-wrapper"
                    editorClassName="demo-editor"
                    onEditorStateChange={onEditorStateChange("content")}
                  />
                </div>
                {getErrorMessage(errors, "content") && (
                  <small className="block mt-1 text-red-600">
                    {getErrorMessage(errors, "content")}
                  </small>
                )}
              </div>
            </div>
          </div>

          {/* Submit Button */}
          <button
            {...(loading && { disabled: true })}
            type="submit"
            className="w-full py-2 px-4 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200"
          >
            {loading ? "Menyimpan..." : "Simpan"}
          </button>
        </div>
      </form>
    </LayoutAdmin>
  );
}