import React, { useState } from 'react';
import { StoryFn, Meta } from '@storybook/react';
import BrowseToSource from './BrowseToSource';
import sampleSources from '../__mocks__/sample-sources.json';
import { ResourceBrowserSource } from '../types';

export default {
    title: 'Browse to source',
    component: BrowseToSource,
} as Meta<typeof BrowseToSource>;

const Template: StoryFn<typeof BrowseToSource> = (props) => {
    const sources = sampleSources as ResourceBrowserSource[];

    const [selectedSource, setSelectedSource] = useState<ResourceBrowserSource>(sources[0]);

    return (
        <div className="m-3">
            <BrowseToSource
                selectedSource={selectedSource}
                sources={sources}
                onSourceSelect={(source) => setSelectedSource(source)}
            ></BrowseToSource>
        </div>
    );
};

export const Primary = Template.bind({});
Primary.args = {};