import React, { useState } from "react";
import { Toaster } from "react-hot-toast";
import apiInstance from "@/interceptor/instance";
import { phoneValidator } from "@/components/commonFunctions/phoneValidator";
import { message } from "antd";

const AddNewMarketer = () => {
  const [data, setData] = useState({
    name: "",
    phone: "",
  });

  const handleChange = (event: any) => {
    const { name, value } = event.target;
    setData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleSubmit = (e: any) => {
    e.preventDefault();
    console.log(data);
    if (!data.name) {
      return message.error("Name can't be empty.");
    }
    if (phoneValidator(data.phone)) {
      apiInstance
        .post("/api/admin/referralUser", data)
        .then((res) => {
          if (res.status === 201) {
            message.success("Added Successfully");
            setData({
              name: "",
              phone: "",
            });
          }
        })
        .catch((error) => {
          if (error.response && error.response.status === 400) {
            message.error(error.response.data.message || "Bad Request");
          } else {
            message.error("An unexpected error occurred");
          }
        });
    } else {
      message.error("Enter Valid 11 digit number.");
    }
  };

  return (
    <>
      <h1 className="text-[#FF332B] font-bold text-3xl sm:text-4xl m-6 text-center">
        New Marketer Details
      </h1>
      <Toaster />

      <form className="max-w-md mx-auto p-8 shadow-xl" onSubmit={handleSubmit}>
        <div className="mb-4">
          <label
            htmlFor="firstName"
            className="block mb-2 text-sm font-medium text-[#FF332B] "
          >
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            value={data.name}
            // required
            onChange={handleChange}
            className="shadow-sm bg-gray-50 border border-gray-300 text-[#FF332B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
          />
        </div>

        <div className="mb-4">
          <label
            htmlFor="phone"
            className="block mb-2 text-sm font-medium text-[#FF332B] "
          >
            Phone
          </label>
          <input
            type="number"
            id="phone"
            name="phone"
            value={data.phone}
            // required
            onChange={handleChange}
            className="shadow-sm bg-gray-50 border border-gray-300 text-[#FF332B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
          />
        </div>
        <button
          type="submit"
          className="bg-[#383736] hover.bg-[#FE342B] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
        >
          Submit
        </button>
      </form>
    </>
  );
};

export default AddNewMarketer;