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

export default {
    title: 'Main container',
    component: MainContainer,
} as Meta<typeof MainContainer>;

const Template: StoryFn<typeof MainContainer> = (props) => {
    const sources = sampleSources as ResourceBrowserSource[];
    const plugins: [ResourceBrowserPlugin] = createPlugins(0, true);

    const [selectedSource, setSelectedSource] = useState<ResourceBrowserSource | null>(props.selectedSource ?? null);

    return (
        <div className="flex justify-center m-3">
            <MainContainer
                title={props.title}
                titleAriaProps={props.titleAriaProps}
                allowedTypes={props.allowedTypes}
                sources={sources}
                selectedSource={selectedSource}
                onSourceSelect={(source) => setSelectedSource(source)}
                onChange={(resource) => {
                    if (resource) {
                        console.log(`Resource ${resource?.name} / ${resource.id} was selected`);
                    } else {
                        console.log(`No resource was selected`);
                    }
                }}
                onClose={() => {
                    console.log('onClose called');
                }}
                plugin={plugins[0]}
            ></MainContainer>
        </div>
    );
};

export const NoSourceSelected = Template.bind({});

NoSourceSelected.args = {
    title: 'Main Container',
    titleAriaProps: {},
    allowedTypes: [],
    selectedSource: null,
};

export const SourceSelected = Template.bind({});
SourceSelected.args = {
    ...NoSourceSelected.args,
    selectedSource: {
        name: 'Bynder #1',
        id: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
        type: 'dam',
        group: 'DAM',
    },
};