import React, { useState } from "react";

import { Tooltip } from "@mui/material";

import styles from "../../../../../assets/styles/customstyles.module.css";
import CustomPopUpDailog from "../../../../../components/CustomPopUpDailog";
import CustomTable from "../../../../../components/CustomTable";
import CustomButton from "../../../../../components/CustomButton";
import CustomSelectField from "../../../../../components/CustomSelectField";
import CustomTextField from "../../../../../components/CustomTextField";

const AlternativeContactInfo = ({ open, handleClose }) => {

const [selectedContactType, setSelectedContactType] = useState("");
const [selectedRelation, setSelectedRelation] = useState("");
const [name, setName] = useState("");
const [contactDetail, setContactDetail] = useState("");

const [errors, setErrors] = useState({

contactType: "",
relation: "",
name: "",
contactDetail: "",
});

const [rows, setRows] = useState([

{
Name: "Bismillah Ur Rahman",
Relationship: "Father",
"Contact Type": "Address",
Detail: "Villa #43, Cluster Z, Dubai Silicon Oasis",
"Added On": "23/03/2016",
"Added By": "Agent1",
},
{
Name: "Maktoob Salaam",
Relationship: "Brother",
"Contact Type": "Mobile",
Detail: "+962-98765-4321",
"Added On": "25/03/2016",
"Added By": "Agent X",
},
]);

const headers = [
"Name",
"Relationship",
"Contact Type",
"Detail",
"Added On",
"Added By",
];

const contactTypes = [
{ value: "Address" },
{ value: "Email Id" },
{ value: "Mobile" },
];

const relationship = [
{ value: "Customer" },
{ value: "Father" },
 { value: "Mother" },
{ value: "Brother" },
{ value: "Sister" },
{ value: "Friend" },
];

// ✅ Validation Function
const validateFields = () => {
let newErrors = {};
const nameRegex = /^[A-Za-z ]+$/; // Only alphabets and spaces

newErrors.name = !name.trim()
? "Please enter a name"
: !nameRegex.test(name)
? "Only alphabets allowed"
: "";
newErrors.contactType = !selectedContactType
? "Please select Contact Type"
: "";
newErrors.relation = !selectedRelation ? "Please select Relationship" : "";
newErrors.contactDetail = !contactDetail.trim()
? "Please enter contact details"
: "";

setErrors(newErrors);
return Object.values(newErrors).every((error) => error === ""); // Returns true
if no errors
};

// ✅ Handle Save (Updated)

const handleSave = () => {
if (!validateFields()) return;

const newRow = {
Name: name,
Relationship: selectedRelation,
"Contact Type": selectedContactType,
Detail: contactDetail,
"Added On": new Date().toLocaleDateString(),
"Added By": "Agent",
};

setRows((prevRows) => [...prevRows, newRow]); // ✅ Append new entry to the

table
handleClearFields(); // ✅ Clear input fields after saving
};

// ✅ Handle Clear Fields

const handleClearFields = () => {
setName("");
setSelectedContactType("");
setSelectedRelation("");
setContactDetail("");
setErrors({ contactType: "", relation: "", name: "", contactDetail: "" });
};

return (
<CustomPopUpDailog
open={open}
 handleClose={handleClose}
title="Alternate Contact Information"
>
<div className={styles.alt_cont_container}>
{/* Custom Table */}
<CustomTable rows={rows} headers={headers} size={"small"} border={1} />

{/* ✅ Add Button and Fields Side by Side */}

<div className={styles.alt_cont_flex_row}>
{/* Add Alternate Contact Button */}
<div
className={styles.alt_cont_custum_button}
style={{ width: "271px" }}
>
<CustomButton
title="Add Alternate Contact Information"
fontSize={"11px"}
backgroundColor={"#bdbdbd"}
color={"black"}
/>
</div>

{/* Fields Div */}

<div>
{/* First Row: Contact Type, Name, Relation */}
<div
className={styles.alt_cont_flex_row}
style={{ display: "flex", alignItems: "center" }}
>
<div className={styles.alt_cont_input_group}>
<span className={styles.alt_cont_label}>Contact Type:</span>
<Tooltip
title={errors.contactType || ""}
open={!!errors.contactType}
placement="top"
arrow
>
<div
className={errors.contactType ? styles.error_select : ""}
>
<CustomSelectField
label="Please select"
name="contactType"
value={selectedContactType}
onChange={(e) => setSelectedContactType(e.target.value)}
options={contactTypes}
height={"28px"}
width={"150px"}
/>
</div>
</Tooltip>
</div>

<div className={styles.alt_cont_input_group}>
<span className={styles.alt_cont_label}> Name:</span>
<Tooltip
title={errors.name || ""}
open={!!errors.name}
placement="top"
 arrow
style={{ height: "26px", marginBottom: "14px" }}
>
<div className={errors.name ? styles.error_input : ""}>
<CustomTextField
height={"28px"}
width={"150px"}
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
</Tooltip>
</div>

<div className={styles.alt_cont_input_group}>
<span className={styles.alt_cont_label}>Relation:</span>
<Tooltip
title={errors.relation || ""}
open={!!errors.relation}
placement="top"
arrow
>
<div className={errors.relation ? styles.error_select : ""}>
<CustomSelectField
label="Please select"
name="relation"
value={selectedRelation}
onChange={(e) => setSelectedRelation(e.target.value)}
options={relationship}
height={"28px"}
width={"150px"}
sx={{ margin: "0 0 14px 0" }}
/>
</div>
</Tooltip>
</div>
</div>

{/* Second Row: Contact Detail */}

<div className={styles.alt_cont_flex_row}>
<div className={styles.alt_cont_input_group}>
<span className={styles.alt_cont_label}>
{selectedContactType === "Mobile"
? "Mobile:"
: selectedContactType === "Address"
? "Address:"
: "Email ID:"}
</span>
<Tooltip
title={errors.contactDetail || ""}
open={!!errors.contactDetail}
placement="top"
arrow
style={{ height: "26px", marginBottom: "13px" }}
>
<div
className={errors.contactDetail ? styles.error_input : ""}
>
<CustomTextField
 height={"28px"}
width={"150px"}
value={contactDetail}
onChange={(e) => setContactDetail(e.target.value)}
/>
</div>
</Tooltip>
</div>
</div>

{/* Buttons */}

<div className={styles.alt_cont_button_group}>
<CustomButton title="Save" backgroundColor={"#bdbdbd"}
color={"black"} onClick={handleSave} />
<CustomButton title="Cancel" backgroundColor={"#bdbdbd"}
color={"black"} onClick={handleClearFields} />
</div>
</div>
</div>
</div>
</CustomPopUpDailog>
);
};

export default AlternativeContactInfo;