import React, { useState } from "react";
import { CustomerContactDetails } from "@/services/profile";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";

import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  FormLabel,
  FormGroup,
  Form,
  Row,
  Col,
} from "react-bootstrap";

interface AddRateModalProps {
  show: boolean;
  handleClose: () => void;
}

const AddMoreModal: React.FC<AddRateModalProps> = ({
  show,
  setRefresh,
  handleClose,
}) => {
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    ext: "",
    position: "",
    email: "",
    fax: "",
  });

  const { data } = useSession();
  const token = data?.user?.image;
  const formDataQuery = useRouter();
  const Carrierid = formDataQuery?.query?.id;

  const validateEmail = (email: string) => {
    return /\S+@\S+\.\S+/.test(email);
  };

  const validatePhone = (phone: string) => {
    return /^\d{3}-\d{3}-\d{4}$/.test(phone);
  };

  const validateFax = (fax: string) => {
    return /^\d{3}-\d{3}-\d{4}$/.test(fax);
  };

  const validateForm = () => {
    const { name, phone, position, email, fax } = formData;

    if (!name || !phone || !position || !email || !fax) {
      toast.error("All fields are required");
      return false;
    }

    if (!validateEmail(email)) {
      toast.error("Invalid email format");
      return false;
    }

    if (!validatePhone(phone)) {
      toast.error("Invalid phone number format");
      return false;
    }

    if (fax && !validateFax(fax)) {
      toast.error("Invalid fax number format");
      return false;
    }

    return true;
  };

  const formatPhoneNumber = (value: string): string => {
    return value
      .replace(/\D/g, "")
      .slice(0, 10)
      .replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    let formattedValue = value;

    if (name === "phone" || name === "fax") {
      formattedValue = formatPhoneNumber(value);
    }

    if (formattedValue.length <= 30) {
      setFormData({
        ...formData,
        [name]: formattedValue,
      });
    }
  };

  const handleSubmit = async () => {
    try {
      if (!validateForm()) {
        return;
      }

      const response = await CustomerContactDetails(token, Carrierid, formData);
      if (response.status === "success") {
        setFormData("");
        toast.success(response.message, {
          position: toast.POSITION.TOP_CENTER,
        });
        handleClose();
        setRefresh(true);
      } else {
        toast.error("An error occurred");
      }
    } catch (error) {
      toast.error("An error occurred");
    }
  };
  const Uimodel = () => {
    return (
      <>
        {" "}
        <Modal
          className="modal_main modal-lg modal_main"
          show={show}
          centered
          backdrop="static"
          onHide={handleClose}
        >
          <ModalHeader className="new_modal">
            <h3> Add Contact Details </h3>
            <div
              onClick={() => {
                setFormData("");
                handleClose();
              }}
              className="rounded cancel-btn close_btn"
            >
              <i className="bi bi-x-lg">Close</i>
            </div>
          </ModalHeader>
          <ModalBody>
            <div className="main_modal mt-3">
              <Form>
                <Row>
                  <ToastContainer />
                  <Col>
                    <FormGroup className="now mb-2" controlId="name">
                      <FormLabel className="info-user lable-info">
                        Name:
                      </FormLabel>
                      <input
                        className={`form-field`}
                        type="text"
                        placeholder=""
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                      />
                    </FormGroup>

                    <FormGroup className="now mb-2" controlId="phone">
                      <FormLabel className="info-user lable-info">
                        Phone:
                      </FormLabel>
                      <input
                        className={`form-field`}
                        type="text"
                        placeholder=""
                        name="phone"
                        value={formData.phone}
                        onChange={handleChange}
                      />
                    </FormGroup>

                    <FormGroup className="now" controlId="ext">
                      <FormLabel className="info-user lable-info">
                        Ext:
                      </FormLabel>
                      <input
                        className={`form-field`}
                        type="text"
                        placeholder=""
                        maxLength={16}
                        name="ext"
                        value={formData.ext}
                        onChange={handleChange}
                      />
                    </FormGroup>
                  </Col>
                  <Col>
                    <FormGroup className="now mb-2" controlId="position">
                      <FormLabel className="info-user lable-info">
                        Position:
                      </FormLabel>
                      <input
                        className={`form-field`}
                        type="text"
                        placeholder=""
                        name="position"
                        value={formData.position}
                        onChange={handleChange}
                      />
                    </FormGroup>

                    <FormGroup className="now mb-2" controlId="email">
                      <FormLabel className="info-user lable-info">
                        Email:
                      </FormLabel>
                      <input
                        className={`form-field`}
                        type="email"
                        placeholder=""
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                      />
                    </FormGroup>

                    <FormGroup className="now mb-2" controlId="fax">
                      <FormLabel className="info-user lable-info">
                        Fax:
                      </FormLabel>
                      <input
                        className={`form-field`}
                        type="text"
                        placeholder=""
                        name="fax"
                        value={formData.fax}
                        onChange={handleChange}
                      />
                    </FormGroup>
                  </Col>
                </Row>
              </Form>
            </div>
          </ModalBody>
          <ModalFooter className="quote_btn_block">
            <Button
              type="button"
              className="btn btn-success w-25 btn-modal"
              onClick={handleSubmit}
            >
              Submit
            </Button>
          </ModalFooter>
        </Modal>
      </>
    );
  };
  return <>{Uimodel()}</>;
};
export default AddMoreModal;