import {useEffect} from "react";
import Protocol from "../../../models/Papyros/Protocol";
import {useNavigate} from "react-router-dom";
import protocolFooterImg from "../../../assets/images/protocol-footer.svg";
import "./protocol-success.scss";

type ProtocolSuccessProps = {
    protocolInfo: Protocol;
    resetForm: () => void;
};

const ProtocolSuccess = ({ protocolInfo, resetForm}: ProtocolSuccessProps) => {
	const navigate = useNavigate();



	useEffect(() => {
		if (!protocolInfo.subject) {

			navigate("/demo_role/papyros/protocol");
		}
        // eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	return (
        <div className="wrapper">
            <div className="protocol-success-container container">
                <p className="protocol-title">
                    Ο αριθμός πρωτοκόλλου είναι: {protocolInfo.protocol}
                </p>
                <div className="protocol-data">
                    <div className="protocol-genre-year-container w-100 d-flex justify-space-between">
                        <p className=" genre protocol-item">
                            <span className="protocol-item-label">
                                Είδος Πρωτοκόλλου:
                            </span>
                            {protocolInfo.type}
                        </p>
                        <p className="protocol-item">
                            <span className="protocol-item-label">Έτος:</span>
                            {protocolInfo.year}
                        </p>
                    </div>
                    <p className="day protocol-item">
                        <span className="protocol-item-label">
                            Ημερ. Πρωτοκόλλησης:
                        </span>
                        {protocolInfo.date}
                    </p>
                </div>
                <div className="protocol-subject">
                    <p className="protocol-subject-label">Θέμα:</p>
                    <p className="protocol-item subject">{protocolInfo.subject}</p>
                </div>
                <div className="protocol-origin">
                    <p className="unit protocol-item">
                        <span className="protocol-item-label">
                            Μονάδα Πρωτοκόλλησης:
                        </span>
                        {protocolInfo.unit}.
                        {protocolInfo.unitname}
                    </p>
                    <div className="by-to d-flex">
                        <p className="by protocol-item">
                            <span className="protocol-item-label">
                                Πρωτοκολλήθηκε από:
                            </span>
                            {protocolInfo.from}
                        </p>
                        <p className="to protocol-item">
                            <span className="protocol-item-label">Προς:</span>
                            {protocolInfo.to}
                        </p>
                    </div>
                </div>
                <div className="protocol-success-btn-container">
                   {/* <FormButtonAlt*/}
                   {/*     text='Νέα Πρωτοκόλληση'*/}
                   {/*     buttonType='button'*/}
                   {/*     onButtonClick={()=>{*/}
                   {/*         resetForm()*/}
                   {/*         navigate('/demo_role/papyros/protocol')*/}
                   {/*     }}*/}
                   {/*     status='retry'*/}
                   {/*/>*/}
                </div>
            </div>
            <div className="protocol-footer-img-container">
				<img src={protocolFooterImg} alt="protocol footer img"></img>
			</div>
        </div>

	);
};

export default ProtocolSuccess;