Untitled

import ImageDropSingle from "@/app/components/Global/ImageDropSingle";
import { useState } from "react";
import { ImSpinner3 } from "react-icons/im";



function CreateAndEditNotification({ editData, handleEditSubmit, handleSubmit, formData, setFormData, btnLoading, handleInputChange, validDateRangeMsg, couponExistMsg, bannerImage, setBannerImage }) {

  const [bannerImageErrorMsg, setBannerImageErrorMsg] = useState("");
  console.log(bannerImage, "bannerImage");
  return (
    <dialog id="createNotificationModal" className="modal">
      <div className="modal-box max-w-3xl">
        <div className="mx-auto p-4">
          <h2 className="mb-4 text-2xl font-semibold">
            {editData ? "Edit" : "Create"} Notification
          </h2>
          <form onSubmit={editData ? handleSubmit : handleSubmit}>
            <div>
              <div className="mb-4">
                <div>
                  <label
                    className="mb-2 block text-sm font-semibold text-gray-700"
                    htmlFor="title"
                  >
                    Title
                  </label>
                  <input
                    type="text"
                    id="title"
                    name="title"
                    value={formData.title}
                    onChange={handleInputChange}
                    className="input input-bordered w-full"
                    required
                  />
                </div>

                <div className="mt-3">
                  <label
                    className="mb-2 block text-sm font-semibold text-gray-700"
                    htmlFor="body"
                  >
                    Body
                  </label>
                  <textarea
                    type="text"
                    id="body"
                    name="body"
                    value={formData.body}
                    onChange={handleInputChange}
                    className="input input-bordered w-full h-40"
                    required
                  />
                </div>
                <div className="mt-3">
                  <label
                    className="mb-2 block text-sm font-semibold text-gray-700"
                    htmlFor="body"
                  >
                    Image Type
                  </label>
                  <select name="image_type" id="" value={formData.image_type}
                    onChange={handleInputChange} className="select select-bordered w-full ">
                    <option value="none">none</option>
                    <option value="image">image</option>
                    <option value="url">url</option>
                  </select>
                </div>
              </div>

              {formData.image_type == 'url' &&
                <div>
                  <label
                    className="mb-2 block text-sm font-semibold text-gray-700"
                    htmlFor="url"
                  >
                    Image url
                  </label>
                  <input
                    type="text"
                    id="url"
                    name="url"
                    value={formData.url}
                    onChange={handleInputChange}
                    className="input input-bordered w-full"

                  />
                </div>}
              {formData.image_type == 'image' &&
                <div>
                  <label
                    className="mb-2 block text-sm font-semibold text-gray-700"
                    htmlFor="url"
                  >
                    Upload Image
                  </label>

                  <ImageDropSingle
                    value={bannerImage}
                    onChange={(image) => {
                      setBannerImageErrorMsg("");
                      setBannerImage(image);
                    }}
                    sizeShow={false}
                  />
                </div>
              }
              <div className="mt-8 flex justify-end">
                <button
                  type="submit"
                  className={`btn text-white h-2 bg-[var(--button-color)] text-xs hover:bg-[var(--button-hover-color)]`}
                >
                  {editData ? "Update" : "Submit"}{" "}
                  {btnLoading && (
                    <ImSpinner3 className="animate-spin text-base" />
                  )}
                </button>
              </div>


            </div>
          </form>
        </div>
        <form method="dialog">
          <button className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">
            ✕
          </button>
        </form>
      </div>
    </dialog>

  )
}

export default CreateAndEditNotification