import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
import {Button, Card, CardBody, CardHeader, Modal} from 'reactstrap';
import cx from "classnames"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faRemove } from '@fortawesome/free-solid-svg-icons';

import "../../assets/styles/utils/modal.scss";

const index = forwardRef( //forwardRef allows parent components to access the function of child via ref, i.e forwards its ref to the child
    (
        { containerClass, children, title, showButtons = false, showCloseButton = false, modalType = "md", onCloseModal= () => {} }, //props
        ref
    ) => {

    const [ showModal, setShowModal ] = useState(false)
    const [ modalData, setModalData ] = useState({})

    const innerRef = useRef()

    const show = () => {
        setShowModal(true)
    }

    const hide = () => {
        setShowModal(false);
        onCloseModal();
    }

    const getData = () => {
        return modalData
    }

    const setData = (data) => {
        setModalData(data)
    }

    useImperativeHandle(ref, () => ({ //imperativeHandle exposes listed functions to the ref, so that they can be used by the parent
        show,
        hide,
        getData,
        setData
    }))

    //adding modal props to child component
    const childrenWithProps = React.Children.map(children, child =>
        React.cloneElement(child, {data: modalData, closeModal: hide})
    );

  return (
    <Modal isOpen={showModal} className={cx("dialog-box", modalType)} centered={true}>
        <Card className={cx("card", containerClass)}>
            <div className="modal-card-header">
                {title && <CardHeader className="m-auto">{title}</CardHeader>}
                {showCloseButton && <Button color="light" className="close-button" onClick={hide}>
                    <FontAwesomeIcon icon={faRemove} />
                </Button>}
            </div>
            <CardBody className="child-props">
                {showModal? childrenWithProps : ""}
            </CardBody>
            {showButtons && <div className="button-group">
                <Button color="danger" className="btn-wide mb-2 me-2 modal-button" onClick={hide}>No</Button>
                <Button color="success" className="btn-wide mb-2 me-2 modal-button" onClick={hide}>Yes</Button>
            </div>}
        </Card>
    </Modal>
  )
})

export default index