import React from 'react';
import { Divider } from '@squiz/sds';
import { ResourceBrowserSource, ResourceBrowserSourceWithPlugin, PluginLaunchMode, PluginLaunchModeType } from '../types';

interface ResourceLauncherProps {
    sources: ResourceBrowserSourceWithPlugin[];
    onSourceSelect(source: ResourceBrowserSource, mode: PluginLaunchMode): void;
}

function ResourceLauncher({ sources, onSourceSelect }: ResourceLauncherProps) {
    return (
        <div className="overflow-y-auto w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4">
            <ul tabIndex={-1} aria-label={`sources list`} className="flex flex-col bg-gray-100 min-h-full focus-visible:outline-0">
                {sources.map((source, index) => {
                    const SourceLauncher = source.plugin.renderResourceLauncher();

                    return (
                        <li key={index} className="flex items-stretch relative">
                            <div className={`squiz-rb-plugin squiz-rb-plugin--${source.plugin?.type} w-full`}>
                                <SourceLauncher
                                    source={source}
                                    onSearch={(query) => onSourceSelect(source, { type: PluginLaunchModeType.Search, args: { query } })}
                                    onBrowse={(browseTo) =>
                                        onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } })
                                    }
                                />
                                {sources.length > 1 && index < sources.length - 1 && (
                                    <div className="pt-3 pb-3">
                                        <Divider />
                                    </div>
                                )}
                            </div>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
}

export default ResourceLauncher;