Untitled

"use client";
import MainLayout from "@/app/components/Layouts/MainLayout";
import PasswordFild from "@/app/components/PasswordFild";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";

const Page = () => {
  const [settings, setSettings] = useState({
    defaultCopies: 1,
    pricePerSet: 0,
    vatPercentage: 0,
    nodemailerMail: "", // Add state for Nodemailer mail
    nodemailerPassword: "", // Add state for Nodemailer password
    firebaseServerkey: "", // Add state for Firebase Serverkey
  });

  useEffect(() => {
    // Fetch the previous data when the component mounts
    async function fetchSettings() {
      try {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_BACKEND_URL}/settings`
        );

        if (response.ok) {
          const data = await response.json();
          setSettings(data.settings);
        } else {
          // Handle error
          console.error("Failed to fetch settings.");
        }
      } catch (error) {
        // Handle network or other errors
        console.error("Failed to fetch settings.", error);
      }
    }

    fetchSettings();
  }, []); // The empty dependency array ensures this runs only once on component mount

  const handleChange = (e) => {
    const { name, value } = e.target;
    setSettings({
      ...settings,
      [name]: value,
    });
  };

  const handleSave = async () => {
    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_BACKEND_URL}/settings`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(settings),
        }
      );

      if (response.ok) {
        // Settings successfully updated
        toast.success("Settings updated!");
      } else {
        // Handle error
        toast.error("Failed to update settings.");
      }
    } catch (error) {
      // Handle network or other errors
      console.error(error);
      alert("Failed to update settings.");
    }
  };

  const [passwordType, setPasswordType] = useState(false)
  const handlePasswordShow = async (e) => {
    setPasswordType(!passwordType)
  };

  return (
    <MainLayout>
      <div className="bg-white p-6">
        <h1 className="text-lg font-semibold">Image Settings</h1>
        <hr className="my-2" />
        <div className="p-4">
          <label>Default Number of Copies Per Set</label>
          <input
            className="my-1 w-full border p-2"
            name="defaultCopies"
            value={settings.defaultCopies}
            onChange={handleChange}
          />
          <label>Price Per Set</label>
          <input
            className="my-1 w-full border p-2"
            name="pricePerSet"
            value={settings.pricePerSet}
            onChange={handleChange}
          />
          <label>VAT (%)</label>
          <input
            className="my-1 w-full border p-2"
            name="vatPercentage"
            value={settings.vatPercentage}
            onChange={handleChange}
          />
        </div>
        <h1 className="mt-8 text-lg font-semibold">Nodemailer Settings</h1>{" "}
        <hr />
        <div className="mt-2 flex flex-row justify-between p-4">
          <div className="mr-2 flex w-1/2 flex-col">
            <label className="mb-2 font-semibold">Nodemailer Mail:</label>
            <input
              className="flex-grow border p-2"
              type="email"
              name="nodemailerMail"
              value={settings.nodemailerMail}
              onChange={handleChange}
              placeholder="Enter your Nodemailer mail"
            />
          </div>
          <div className="flex w-1/2 flex-col">
            <label className="mb-2 font-semibold">Nodemailer Password:</label>
            {/* <input
              className="flex-grow border p-2"
              type="password"
              name="nodemailerPassword"
              value={settings.nodemailerPassword}
              onChange={handleChange}
              placeholder="Enter your Nodemailer password"
            /> */}
            <PasswordFild password={settings.nodemailerPassword} handleChange={handleChange} />

          </div>
        </div>
        <h1 className="mt-8 text-lg font-semibold">Firebase Serverkey</h1>{" "}
        <hr />
        <div className="mt-2 p-4">
          <div>
            <label className="mb-2 font-semibold">Server-Key: </label>
            {/* <input
              className="w-full flex-grow border p-2"
              type="password"
              name="firebaseServerkey"
              value={settings.firebaseServerkey}
              onChange={handleChange}
              placeholder="Enter your Firebase Serverkey"
            /> */}
            <PasswordFild password={settings.firebaseServerkey} handleChange={handleChange} />
          </div>
        </div>
        <h1 className="mt-8 text-lg font-semibold">Hotpot Key</h1> <hr />
        <div className="mt-2 p-4">
          <div>
            <label className="mb-2 font-semibold">Hot-Pot key: </label>
            {/* <input
              className="w-full flex-grow border p-2"
              type="password"
              name="hotpotKey"
              value={settings.hotpotKey}
              onChange={handleChange}
              placeholder="Enter your Firebase Serverkey"
            /> */}
            <PasswordFild password={settings.hotpotKey} handleChange={handleChange} />
          </div>
        </div>
        <h1 className="mt-8 text-lg font-semibold">Cloudinary Settings</h1>{" "}
        <hr />
        <div className="mt-2 p-4">
          <div className="flex gap-5">
            <div className="flex w-1/3 flex-col">
              <label className="mb-2 font-semibold">
                Cloudinary Cloud Name:{" "}
              </label>
              {/* <input
                className="w-full flex-grow border p-2"
                type="password"
                name="cloudinaryCloudName"
                value={settings.cloudinaryCloudName}
                onChange={handleChange}
                placeholder="Enter your Firebase Serverkey"
              /> */}
              <PasswordFild password={settings.cloudinaryCloudName} handleChange={handleChange} />
            </div>
            <div className="flex w-1/3 flex-col">
              <label className="mb-2 font-semibold">Cloudinary Api Key: </label>
              {/* <input
                className=" flex-grow border p-2"
                type="password"
                name="cloudinaryApiKey"
                value={settings.cloudinaryApiKey}
                onChange={handleChange}
                placeholder="Enter your Firebase Serverkey"
              /> */}
              <PasswordFild password={settings.cloudinaryApiKey} handleChange={handleChange} />
            </div>
            <div className="flex w-1/3 flex-col">
              <label className="mb-2 font-semibold">
                Clodinary App Secrect:
              </label>
              {/* <input
                name="cloudinaryAppSecrect"
                value={settings.cloudinaryAppSecrect}
                onChange={handleChange}
                type="password"
                placeholder="Password"
                className="input input-bordered input-accent w-full"
              /> */}
              <PasswordFild password={settings.cloudinaryAppSecrect} handleChange={handleChange} />
            </div>
          </div>
        </div>
        <div className="mt-2 p-4">
          <label className="mb-2 font-semibold">Currency</label>
          {/* <input
            className="w-full flex-grow border p-2"
            type="text"
            name="defaultCurrency"
            value={settings.defaultCurrency}
            onChange={handleChange}
            placeholder="Enter your Firebase Serverkey"
          /> */}
          <PasswordFild password={settings.defaultCurrency} handleChange={handleChange} />
        </div>
        <button
          className="btn btn-primary my-2 ml-4 px-32"
          onClick={handleSave}
        >
          Save
        </button>
      </div>
    </MainLayout>
  );
};

export default Page;