import React from 'react';
import Modal from 'react-bootstrap/Modal';
import { Row, Col, Button } from 'react-bootstrap';
import { useCookies } from 'react-cookie';

const CustomModal = ({ show, handleClose, modalContent }) => {
    const [dontShowAgain, setDontShowAgain] = React.useState(false);
    const [cookies, setCookie] = useCookies([`MainModal_${modalContent.id}`]);

    const handleCheckboxChange = () => {
        const newDontShowAgain = !dontShowAgain;
        setDontShowAgain(newDontShowAgain);
        if (newDontShowAgain) {
            const expirationDate = new Date();
            expirationDate.setDate(expirationDate.getDate() + 1);
            setCookie(`MainModal_${modalContent.id}`, "true", { expires: expirationDate });
            handleClose();
        }
    };

    React.useEffect(() => {
        if (cookies[`MainModal_${modalContent.id}`]) {
            handleClose();
        }
    }, [cookies, modalContent.id, handleClose]);

    return (
        <Modal show={show} onHide={handleClose} backdrop="static">
            <Modal.Header closeButton className={"bg-224 text-white rounded-0"}>
                <Modal.Title className={"fs-6"}>{modalContent.title}</Modal.Title>
            </Modal.Header>
            <Modal.Body className={"px-4 pb-0"}>
                <Row className={"pb-3"}>
                    <Col xs={12} className="text-start">
                        {modalContent.body && modalContent.body.split("\n").map((line, index) => (
                            <React.Fragment key={index}>
                                {line}
                                <br />
                            </React.Fragment>
                        ))}
                    </Col>
                </Row>
                {modalContent.files && modalContent.files.map((file, index) => (
                    <Row key={index} className={`py-2 ${index === 0 ? 'border-top' : ''}`}>
                        <Col xs={1}><img src={file.imageSrc} className={"h_20"} alt="파일" /></Col>
                        <Col xs={11} className="text-start">{file.name}</Col>
                    </Row>
                ))}
                {/*<Row className={"py-2 border-top"}>*/}
                {/*    <Col xs={1} ><img src={"/assets/images/file.png"} className={"h_20"} /></Col>*/}
                {/*    <Col xs={11} className="text-start">파일명</Col>*/}
                {/*</Row>*/}
                {/*<Row className={"py-2"}>*/}
                {/*    <Col xs={1} ><img src={"/assets/images/file.png"} className={"h_20"} /></Col>*/}
                {/*    <Col xs={11} className="text-start">파일명</Col>*/}
                {/*</Row>*/}
                {/*<Row className={"py-2"}>*/}
                {/*    <Col xs={1} ><img src={"/assets/images/file.png"} className={"h_20"} /></Col>*/}
                {/*    <Col xs={11} className="text-start">파일명</Col>*/}
                {/*</Row>*/}
            </Modal.Body>
            <Modal.Footer className={"h_30 py-1 mb-1 bg-fa"}>
                <input type="checkbox" checked={dontShowAgain} onChange={handleCheckboxChange} id={`MainModal_${modalContent.id}`} />
                <label className={"f_12"} htmlFor={`MainModal_${modalContent.id}`}> 오늘 하루 열지 않음</label>
            </Modal.Footer>
        </Modal>
    );
};

export default CustomModal;