import React from 'react';
import { StoryFn, Meta } from '@storybook/react';

import { ResourcePicker, ResourcePickerProps } from './ResourcePicker';
import { createPlugins } from '../__mocks__/StorybookHelpers';

import mockImageResource from './mock-image-resource.json';
import mockResource from './mock-resource.json';

export default {
    title: 'Resource picker field',
    component: ResourcePicker,
} as Meta<typeof ResourcePicker>;

const Template: StoryFn<ResourcePickerProps> = (args: ResourcePickerProps) => (
    <div className="w-[400px] m-3">
        <ResourcePicker plugins={createPlugins(0)} {...args}>
            {() => <>Resource browser here</>}
        </ResourcePicker>
    </div>
);

export const Empty = Template.bind({});
Empty.args = {
    resource: null,
    allowedTypes: undefined,
    isLoading: false,
    isError: false,
    isDisabled: false,
};

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

export const Loading = Template.bind({});
Loading.args = {
    ...Empty.args,
    isLoading: true,
};

export const Error = Template.bind({});
Error.args = {
    ...Empty.args,
    error: new window.Error('Failed to retrieve asset info due to a Component Service API key problem.'),
};

export const Selected = Template.bind({});
Selected.args = {
    ...Empty.args,
    resource: mockResource,
};

export const SelectedImage = Template.bind({});
SelectedImage.args = {
    ...Empty.args,
    resource: mockImageResource,
};

export const Disabled = Template.bind({});
Disabled.args = {
    ...Empty.args,
    isDisabled: true,
};