"use client";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import axios from "axios";
import MyAlert from "@/components/Alert";

const page = ({ params }: { params: { id: string } }) => {
  const router = useRouter();
  const id: String = params.id;
  const [value, setValue] = useState("");
  const [open, setOpen] = useState(false);
  const [alertType, setAlertType] = useState("");
  const [alertMessage, setAlertMessage] = useState("");

  const handleClose = () => {
    setOpen(false);
  };

  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    try {
      const response: any = await axios.post(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}settings/${id}/value`,
        {
          value,
        }
      );
      if (response) {
        const token = response.data.token;
        const refreshToken = response.data.refreshToken;
        localStorage.setItem("refreshToken", refreshToken);
        localStorage.setItem("jobAdminJwtToken", token);
        router.back();
      }
    } catch (error: any) {
      setAlertType("error");
      setAlertMessage("Faild to set Value");
      setOpen(true);
    }
  };

  return (
    <>
      <MyAlert
        message={alertMessage}
        type={alertType}
        open={open}
        onClose={handleClose}
      />
      <Breadcrumb pageName={`Set Value`} />
      <div className="flex flex-col gap-2">
        <form onSubmit={handleSubmit}>
          <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
            <div className="flex flex-col gap-3.5 p-6.5">
              <div>
                <label className="mb-3 block text-black dark:text-white">
                  Value
                </label>
                <input
                  type="text"
                  value={value}
                  onChange={handleUsernameChange}
                  className={`w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary `}
                />
              </div>

              <button
                type="submit"
                className="inline-flex items-center w-30 justify-center my-3 gap-2.5 border border-primary py-3 px-30 text-center font-medium text-primary hover:bg-opacity-90 lg:px-8 xl:px-10"
              >
                {/* {isLoading ? "Saving..." : "Submit"} */} Submit
              </button>
            </div>
          </div>
        </form>
      </div>
    </>
  );
};

export default page;