import React, {useState, useEffect} from "react";
import { StyledModal } from '../styled/modals/ReplyModal.styled';
import useGeneralStore from "../../hooks/stores/useGeneralStore";
import Modal from "react-modal";
import Draggable from "react-draggable";
import getDate from "../../utils/getDate";


const OriginalCommentModal = ({ isOpen, closeModal, comment }) => {
  const {
    selectedStyle,
  } = useGeneralStore(state => state);

  const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
  const nodeRef = React.useRef(null);
  const originalCommentContent = comment.original?.content;
  const timestamp = getDate(comment.timestamp);


  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 480);
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [setIsMobile]);


  return (
    <StyledModal
      isOpen={isOpen}
      onRequestClose={closeModal}
      contentLabel="Original Comment"
      shouldCloseOnEsc={false}
      shouldCloseOnOverlayClick={isMobile}
      selectedStyle={selectedStyle}
      style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }})}>
      <Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}>
        <div className="modal-content" ref={nodeRef}>
          <div className="modal-header">
            Original at {timestamp}
            <button className="icon" onClick={() => closeModal()} title="close" />
          </div>
          <div id="form">
            <div className="textarea-wrapper">
              <textarea className="textarea"
                rows="4"
                style={{ paddingTop: '0' }}
                placeholder="Comment"
                defaultValue={originalCommentContent}
                wrap="soft"
                readOnly={true} />
            </div>
          </div>
        </div>
      </Draggable>
    </StyledModal>
  );
};

Modal.setAppElement('#root');

export default OriginalCommentModal;