import React, { useState, useEffect } from 'react';
import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  Table
} from 'reactstrap';
import { useJamClient } from '../../context/JamClientContext';

const JKSessionPluginFoldersModal = ({ isOpen, toggle }) => {
  const jamClient = useJamClient();
  const [scanPaths, setScanPaths] = useState([]);

  useEffect(() => {
    if (isOpen) {
      loadScanPaths();
    }
  }, [isOpen]);

  const loadScanPaths = async () => {
    try {
      const pathsResponse = await jamClient.VSTListSearchPaths();
      setScanPaths(pathsResponse || {});
    } catch (error) {
      console.error('Failed to load scan paths:', error);
      setScanPaths({});
    }
  };

  const handleAddScanFolder = async () => {
    try {
     await jamClient.ShowSelectVSTScanDialog("window.ConfigureTracksStore.onVSTPathSelected")
    } catch (error) {
      console.error('Failed to show folder selection dialog:', error);
    }
  };

  const handleDeletePath = async (path) => {
    try {
      // Determine VST type ID based on platform (0 for Windows, 1 for others)
      const isWindows = navigator.platform.includes('Win');
      const vstTypeId = isWindows ? 0 : 1;

      await jamClient.VSTRemoveSearchPath(vstTypeId, path);
      loadScanPaths();
    } catch (error) {
      console.error('Failed to remove search path:', error);
    }
  };

  return (
    <Modal isOpen={isOpen} toggle={toggle} modalClassName="theme-modal" contentClassName="border" size="md">
      <ModalHeader toggle={toggle} className="bg-light d-flex flex-between-center border-bottom-0">
        Manage Plug-in Scan Folders
      </ModalHeader>
      <ModalBody>

        <div className="dialog-inner">
          <h3></h3>
          <p className="instructions">
            If a scan is not finding the VST or AU plugin you want to use, it's likely that we aren't scanning the location where the plugin is installed. Click the ADD SCAN FOLDER button below, and navigate to the folder where the plugin is installed to add that location to the scan list.
          </p>

          <Table bordered striped className="generaltable manage-vst-table">
            <thead>
              <tr>
                <th className="manage-vst-path" colSpan={2}>Plugin Folders</th>
              </tr>
            </thead>
            <tbody className="manage-vst-content">
              {scanPaths?.paths?.map((pathGroup, groupIndex) => (
                pathGroup.type === 'VST' && pathGroup.paths?.map((path, pathIndex) => (
                  <tr key={`${groupIndex}-${pathIndex}`}>
                    <td className="manage-vst-path">
                      <div>{path}</div>
                    </td>
                    <td className="manage-vst-action">
                      <div>
                        <a
                          href="#"
                          onClick={(e) => { e.preventDefault(); handleDeletePath(path); }}
                          style={{ color: '#007bff', textDecoration: 'none' }}
                        >
                          delete
                        </a>
                      </div>
                    </td>
                  </tr>
                ))
              ))}
            </tbody>
          </Table>

          <div className="actions mb-3">

            <Button color="primary" onClick={handleAddScanFolder} className="add-scan-folder">
              Add Scan Folder
            </Button>
          </div>
        </div>
        <ModalFooter>
          <Button color="secondary" onClick={toggle}>
            Close
          </Button>
        </ModalFooter>
      </ModalBody>
    </Modal>
  );
};

export default JKSessionPluginFoldersModal;
