import React, { useState, useEffect } from 'react';
import { faFolder } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import StyledWrapper from './StyledWrapper';
import Modal from 'components//Modal';

const SaveRequest = ({ items, onClose }) => {
  const [showFolders, setShowFolders] = useState([]);

  useEffect(() => {
    setShowFolders(items || []);
  }, [items]);

  const handleFolderClick = (folder) => {
    let subFolders = [];
    if (folder.items && folder.items.length) {
      for (let item of folder.items) {
        if (item.items) {
          subFolders.push(item);
        }
      }

      if (subFolders.length) {
        setShowFolders(subFolders);
      }
    }
  };

  return (
    <StyledWrapper>
      <Modal
        size="md"
        title="Save Request"
        confirmText="Save"
        cancelText="Cancel"
        handleCancel={onClose}
        handleConfirm={onClose}
      >
        <p className="mb-2">Select a folder to save request:</p>
        <div className="folder-list">
          {showFolders && showFolders.length
            ? showFolders.map((folder) => (
                <div key={folder.uid} className="folder-name" onClick={() => handleFolderClick(folder)}>
                  <FontAwesomeIcon className="mr-3 text-gray-500" icon={faFolder} style={{ fontSize: 20 }} />
                  {folder.name}
                </div>
              ))
            : null}
        </div>
      </Modal>
    </StyledWrapper>
  );
};

export default SaveRequest;
