import React from 'react';
import { Icon, IconOptions } from '@squiz/generic-browser-lib';
import { ResourceBrowserSource } from '../types';

interface SourceListProps {
    sources: ResourceBrowserSource[];
    onSourceSelect(source: ResourceBrowserSource): void;
}

function SourceList({ sources, onSourceSelect }: SourceListProps) {
    return (
        <div className="overflow-y-scroll w-screen max-w-[400px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-4.5 pr-4.5 pb-4.5 pt-3">
            <div className="text-md font-semibold">Select an environment to use</div>
            <ul tabIndex={-1} aria-label={`environment list`} className="flex flex-col bg-gray-100 min-h-full focus-visible:outline-0">
                {sources.map((source, index) => {
                    return (
                        <li key={index} className="flex items-stretch relative">
                            <button
                                onClick={() => {
                                    onSourceSelect(source);
                                }}
                                className="w-full p-1 mt-3 bg-white border-1 border-grey-200 min-h-[64px] rounded-lg flex items-center text-md font-semibold"
                            >
                                <Icon icon={source.type as IconOptions} className="ml-4" />
                                <span className="line-clamp-2 text-left break-word ml-4">{source.name || source.id}</span>
                                <Icon icon={'arrow-right' as IconOptions} className="absolute ml-1 right-4" />
                            </button>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
}

export default SourceList;