import React, { Fragment, useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import { toast } from "react-toastify";
// import axios from "axios";

const Plans = () => {
  const initialFormData = {
    title: "",
    description: "",
    price: "",
    validityDays: "",
  };
  const [formData, setFormData] = useState(initialFormData);

  const apiUrl = process.env.REACT_APP_URL;
  const apiKey = process.env.REACT_APP_API_KEY;
  const Token = localStorage.getItem("Token");

  //     const handleChange = (e) => {
  //     const { name, value } = e.target;
  //     setFormData((prev) => ({ ...prev, [name]: value }));
  //   };

  const handleChange = (e) => {
    const { name, value, type } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: type === "number" ? parseFloat(value) : value,
    }));
  };

  const handleDescriptionChange = (value) => {
    setFormData((prev) => ({ ...prev, description: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const formDataToSend = new FormData();
      for (const key in formData) {
        if (formData[key] !== null) {
          formDataToSend.append(key, formData[key]);
        }
      }

      const response = await fetch(`${apiUrl}/property/create-plan`, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${Token}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });
      const response2 = await response.json();
      if (response2.status === "error") {
        throw new Error(response2.message);
      }
      toast.success(response2.message);
      setFormData(initialFormData);
    } catch (error) {
      toast.error(error.message);
    }
  };
  return (
    <Fragment>
      {/*=============== basic  ===============*/}
      <meta charSet="UTF-8" />
      <title>Hauzzi Beta Website UI/UX design by Webkype </title>
      <meta name="robots" content="index, follow" />
      <meta name="keywords" content />
      <meta name="description" content />
      {/*=============== css  ===============*/}
      <link type="text/css" rel="stylesheet" href="css/plugins.css" />
      <link type="text/css" rel="stylesheet" href="css/style.css" />
      <link type="text/css" rel="stylesheet" href="css/dashboard-style.css" />
      <link type="text/css" rel="stylesheet" href="css/color.css" />
      {/*=============== favicons ===============*/}
      <link
        rel="shortcut icon"
        href="https://hauzzi.webkype.net/images/favicon.ico"
      />

      {/* main */}
      <div id="main">
        {/* wrapper  */}
        <div id="wrapper">
          {/* dashbard-menu-wrap */}
          <div className="dashbard-menu-overlay" />
          {/* content */}
          <div className="dashboard-content pt-0">
            <div className="dashboard-menu-btn color-bg">
              <span>
                <i className="fa-solid fa-bars" />
              </span>
              Dasboard Menu
            </div>
            <div className="container dasboard-container">
              {/* dashboard-title end */}
              {/* dasboard-wrapper*/}
              <div className="dasboard-wrapper fl-wrap no-pag">
                <div className="row">
                  <div
                    className="col-md-8"
                    style={{
                      display: "flex",
                      justifyContent: "space-around",
                      width: "100%",
                    }}
                  >
                    <div style={{ width: "60%" }}>
                      <div className="dasboard-widget-title fl-wrap">
                        {" "}
                        <h5>
                          <i className="fa-solid fa-key" />
                          Plan Info{" "}
                        </h5>{" "}
                      </div>{" "}
                      <div className="dasboard-widget-box fl-wrap">
                        {" "}
                        <form className="custom-form" onSubmit={handleSubmit}>
                          <label>Title </label>{" "}
                          <input
                            type="text"
                            name="title"
                            // placeholder="Title"
                            required
                            style={{ width: "100%",padding:"15px 20px" }}
                            onChange={handleChange}
                          />{" "}
                          <label>Price</label>{" "}
                          <input
                            type="number"
                            name="price"
                            required
                            style={{ width: "100%",padding:"15px 20px" }}
                            step="0.01"
                            onChange={handleChange}
                          />
                          <label>Days</label>{" "}
                          <input
                            type="number"
                            name="validityDays"
                            required
                            style={{ width: "100%",padding:"15px 20px" }}
                            step="0.01"
                            onChange={handleChange}
                          />
                          <label>Description </label>{" "}
                          <ReactQuill
                            theme="snow"
                            className="quill-editor"
                            value={formData.description}
                            onChange={handleDescriptionChange}
                            // placeholder="Enter description here..."
                            style={{ height: "auto", marginBottom: "30px" }}
                          />
                          <button
                            type="submit"
                            className="btn color-bg float-btn m-0"
                          >
                            Add Plan
                          </button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div
                className="dashboard-footer"
                style={{ left: "-95px", bottom: "-50px", right: "-95px" }}
              >
                <div className="dashboard-footer-links fl-wrap">
                  <span>Helpfull Links:</span>
                  <ul>
                    <li>
                      <a href="https://hauzi-user.vercel.app/about">About</a>
                    </li>
                    <li>
                      <a href="https://hauzi-user.vercel.app/blog">Blog</a>
                    </li>
                    <li>
                      <a href="https://hauzi-user.vercel.app/pricing">
                        Pricing Plans
                      </a>
                    </li>
                    <li>
                      <a href="https://hauzi-user.vercel.app/contact">
                        Contacts
                      </a>
                    </li>
                    <li>
                      <a href="https://hauzi-user.vercel.app/help">Help FAQs</a>
                    </li>
                  </ul>
                </div>
                <a href="#main" className="dashbord-totop  custom-scroll-link">
                  <i className="fa-solid fa-caret-up" />
                </a>
              </div>

              {/* dashboard-footer end */}
            </div>
            {/* content end */}
            <div className="dashbard-bg gray-bg" />
          </div>
          {/* wrapper end */}
        </div>
        {/* Main end */}
        {/*=============== scripts  ===============*/}
      </div>
    </Fragment>
  );
};

export default Plans;
