import React, { useRef } from "react";
import ReactQuill from "react-quill";
import "quill/dist/quill.snow.css";
import "./Editor.css";

const Editor = ({
  value,
  loading,
  onChange,
  onCancel,
  onSubmit,
  placeholder = "Start writing...",
}) => {
  const modules = {
    toolbar: {
      container: "#custom-toolbar",
    },
  };

  const formats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "list",
    "bullet",
    "blockquote",
    "code-block",
    "link",
    "align",
    "image",
  ];

  return (
    <div className="editor-wrapper m-2 mt-5">
      <div id="custom-toolbar" className="ql-toolbar ql-snow custom-toolbar">
        <div className="d-flex justify-content-between align-items-center w-100">
          {/* Left: Quill Format Buttons */}
          <span className="d-flex">
            <span className="ql-formats">
              <select className="ql-header" defaultValue="">
                <option value="1" />
                <option value="2" />
                <option value="" />
              </select>

              <button className="ql-bold" />
              <button className="ql-italic" />
              <button className="ql-underline" />
              <button className="ql-strike" />
            </span>

            <span className="ql-formats">
              <button className="ql-list" value="ordered" />
              <button className="ql-list" value="bullet" />
              {/* <button className="ql-image" value="file" /> */}
            </span>

            <span className="ql-formats">
              <button className="ql-link" />
            </span>
          </span>
        </div>
      </div>
      <ReactQuill
        value={value}
        onChange={onChange}
        modules={modules}
        formats={formats}
        theme="snow"
        placeholder={placeholder}
      />
      {/* Right: Submit + Cancel Buttons */}
      <div className="d-flex justify-content-end  gap-2 p-1">
        <span
          className="btn btn-xs btn-secondary"
          aria-disabled={loading}
          onClick={onCancel}
        >
          Cancel
        </span>
        <span
          type="submit"
          className="btn  btn-xs btn-primary"
          onClick={onSubmit}
          aria-disabled={loading}
        >
          {loading ? "Please Wait..." : "Submit"}
        </span>
      </div>
    </div>
  );
};

export default Editor;