import React, { useState } from 'react';
import { StoryFn, Meta } from '@storybook/react';
import { ResourceBrowser, ResourceBrowserContextProvider } from './index';
import { createResourceBrowserCallbacks, createPlugins } from './__mocks__/StorybookHelpers';
import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource } from './types';
export default {
    title: 'Resource browser',
    component: ResourceBrowser,
} as Meta<typeof ResourceBrowser>;

const Template: StoryFn<typeof ResourceBrowser> = (props) => {
    const [resource, setResource] = useState<ResourceBrowserUnresolvedResource | null>(props?.value || null);
    const { onRequestSources } = createResourceBrowserCallbacks({
        sourceIsLoading: props.sourceIsLoading || false,
        singleSource: props.singleSource,
        error: props.sourceError ? 'Error' : undefined,
    });

    const onChange = (resource: ResourceBrowserResource | null) => {
        if (resource) {
            const { source } = resource;
            setResource({
                resourceId: resource.id,
                sourceId: source.id,
            });

            console.log(
                `Resource Browser has selected resource #${resource.id} (${resource.name}) from source #${source.id} (${source.name}).`,
            );
        } else {
            setResource(null);
            console.log(`Resource Browser has cleared selected resource.`);
        }
    };

    const plugins: ResourceBrowserPlugin[] = createPlugins(props.callbackWait, props.headerPortal, props.resourceError);

    return (
        <div className="w-[400px] m-3">
            <ResourceBrowserContextProvider
                value={{
                    onRequestSources: onRequestSources as () => Promise<ResourceBrowserSource[]>,
                    plugins,
                    searchEnabled: props.searchEnabled,
                }}
            >
                <ResourceBrowser {...props} value={resource} onChange={onChange} onClear={undefined} />
            </ResourceBrowserContextProvider>
        </div>
    );
};

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

Primary.args = {
    modalTitle: 'Choose asset',
    sourceIsLoading: false,
    sourceIsError: false,
    resourceIsLoading: false,
    error: '',
    callbackWait: 0,
    singleSource: false,
    headerPortal: false,
    searchEnabled: false,
    inline: false,
};

export const Selected = Template.bind({});
Selected.args = {
    ...Primary.args,
    value: {
        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
        sourceId: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
    },
};

export const SelectedFile = Template.bind({});
SelectedFile.args = {
    ...Primary.args,
    value: {
        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
        sourceId: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
        forceResourceType: 'pdf',
    },
};

export const ImagesOnly = Template.bind({});
ImagesOnly.args = {
    ...Primary.args,
    allowedTypes: ['image'],
};

export const SingleSource = Template.bind({});
SingleSource.args = {
    ...Primary.args,
    singleSource: true,
};

export const RestrictedSource = Template.bind({});
RestrictedSource.args = {
    ...Primary.args,
    allowedPlugins: ['matrix'],
    searchEnabled: true,
};

export const SourceByAlias = Template.bind({});
SourceByAlias.args = {
    ...Primary.args,
    value: {
        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
        sourceId: 'bynder-789',
    },
};

export const SearchEnabled = Template.bind({});
SearchEnabled.args = {
    ...Primary.args,
    searchEnabled: true,
};

export const InlineEditSelected = Template.bind({});
InlineEditSelected.args = {
    ...Primary.args,
    inline: true,
    inlineType: 'image',
    value: {
        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
        sourceId: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
    },
};

export const InlineEditLoading = Template.bind({});
InlineEditLoading.args = {
    ...InlineEditSelected.args,
    sourceIsLoading: true,
};

export const InlineEditError = Template.bind({});
InlineEditError.args = {
    ...InlineEditSelected.args,
    sourceError: true,
};

export const InlineEditResourceError = Template.bind({});
InlineEditResourceError.args = {
    ...InlineEditSelected.args,
    resourceError: true,
};