Notes

import { useState } from "react";
import ApiService from "../Services/CyberAIService";
import {ModalTopSection} from "./styledCoomponents"
import "../Components/Modal.css";
import { summaryFeedback } from "./Icon-svg";
import { AiOutlineCloseCircle, AiOutlineClose } from 'react-icons/ai'
import Button from 'react-bootstrap/Button';
export function Modal({ changeControlStatus, icons, bottomText , topText, shown, close, onDecisionSubmit, underWriterOverWrite, promptId, subId, promptCategory, criticalNonCriticalCallBack}) {

const [selectedOption, setSelectedOption] = useState("");
const [underWriterComment, setUnderwriterComment] = useState("")

const underWriterDecision ={
"IN PLACE":"In Place",
"NOT IN PLACE":"Not in place",
"NO INFO":"No Info"
}


const optionArray = [
{
id: 1,
option: "Incorrect page references"
},
{
id: 2,
option: "Incorrectly identified by GenAI"
},
{
id: 3,
option: "Followed up with broker"
},
{
id: 4,
option: "Other"
}
]

const onClickCloseIcon = ()=>{
changeControlStatus(false)
close();
}

const onChangeOption = (event) => {
const selectedOption = optionArray.filter((e) => e.id == event.target.id)[0].option;
setSelectedOption(selectedOption);

}

const onChangeStatus = (event)=>{
if(event.target.checked === true){
close()
}
}

const onChangeInput = (event) => {
setUnderwriterComment(event.target.value)
}

const onSubmitFeedback = () => {
const obj = {
"prompt_output_id": promptId,
"submission_id": subId,
"uw_overwrite": underWriterDecision[underWriterOverWrite],
"prompt_category": promptCategory,
"prompt_subcategory": promptCategory,
"feedback_category": "",
"feedback_sub_category": selectedOption,
"feedback_text": underWriterComment,
"underwriter": localStorage.getItem("email")
}

ApiService.SubmitRiskCotrolFeedback(obj, promptId).then((data) => {
if (data.status === 200) {
changeControlStatus(true)
criticalNonCriticalCallBack()
close();
}
})
.catch((err) => {
changeControlStatus(false, "API failed")
close();
})

}

const onSubmitDecision = () => {
console.log('submitting decision')
onDecisionSubmit()
console.log("closing modal")
close()
}

const onCancelDecision = () => {
close()
}

return shown ? (
<div
className="modal-backdrop"
onClick={() => {
// close modal when outside of modal is clicked
//close();
}}
>
<div
className="modal-content"
onClick={e => {
// do not close modal if anything inside modal content is clicked
e.stopPropagation();
}}
>
<div className="modal-conatiner">
<div className={`cross-arrow w-100 ${promptCategory === "dashboard" || promptCategory === "decision"? "d-none":""}`}>
<svg onClick={onClickCloseIcon}xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
<path d="M27 14.41L25.59 13L20 18.59L14.41 13L13 14.41L18.59 20L13 25.59L14.41 27L20 21.41L25.59 27L27 25.59L21.41 20L27 14.41Z" fill="black" />
</svg>
</div>
<ModalTopSection active={promptCategory === "dashboard" || promptCategory === "decision"}>
{icons()}
<h3 className="top-section-header">{topText}</h3>
</ModalTopSection>
<div className="bottom-section">
<p className="bottom-section-desc">{bottomText}</p>

{(promptCategory !== "dashboard" && promptCategory !== "decision") && <div className="d-flex flex-column align-items-start w-100 radio-btn-group">
{optionArray.map((e) => {
return (
<div className="d-flex align-items-center">
<input onChange={onChangeOption} id={e.id} name="feedbackForm" className="radio-btn-style" type="radio" />
<label htmlFor={e.id} className="option-style">{e.option}</label>
</div>
)
})}
</div>}

{promptCategory === "dashboard" &&
<div className="d-flex flex-column align-items-start w-100 radio-btn-group">
<div className="d-flex align-items-center">
<input onChange={onChangeStatus} className="radio-btn-style" type="checkbox" name='checkbox-label' id="checkbox-label"/>
<label className="option-style fw-bold" htmlFor="checkbox-label">Accept these terms</label>
</div>
</div>

}

{promptCategory === "decision" &&
<div className="button-div col d-flex justify-content-center align-items-center">
<button type="submit" className="btn btn-secondary decision-button" onClick={onSubmitDecision}>Submit Decision</button>
<button type="submit" className="btn btn-secondary return-button" onClick={onCancelDecision}>Return to Submission</button>
</div>

}


{(promptCategory !== "dashboard" && promptCategory !== "decision") && <textarea onChange={onChangeInput} className="w-100 text-area-comments" />}
{(promptCategory !== "dashboard" && promptCategory !== "decision") && <button onClick={onSubmitFeedback} className="modal-submit-btn">Submit Feedback</button>}
</div>

</div>
</div>
</div>
) : null;
}

export function AHSubmissionSummaryModal({shown}){
console.log(shown)
return(
<Modal
show={shown}
backdrop="static"
keyboard={false}
>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
I will not close if you click outside me. Do not even try to press
escape key.
</Modal.Body>
<Modal.Footer>
<Button variant="secondary">
Close
</Button>
<Button variant="primary">Understood</Button>
</Modal.Footer>
</Modal>
)
}