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

import { ResourceBrowserInlineButton } from './ResourceBrowserInlineButton';
export default {
    title: 'Compact Button',
    component: ResourceBrowserInlineButton,
} as Meta<typeof ResourceBrowserInlineButton>;

const Template: StoryFn<typeof ResourceBrowserInlineButton> = (props) => {
    const useResource = () => {
        return { data: {}, error: false, isLoading: props.isLoading };
    };
    return (
        <div className="w-[400px] m-20">
            {/* @ts-ignore */}
            <ResourceBrowserInlineButton {...props} useResource={useResource} />
        </div>
    );
};

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

Image.args = {
    modalTitle: 'Choose image',
    isLoading: false,
    inlineType: 'image',
    value: {
        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
        sourceId: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
    },
};

export const Link = Template.bind({});
Link.args = {
    ...Image.args,
    modalTitle: 'Choose asset',
    inlineType: 'link',
};

export const Resource = Template.bind({});
Resource.args = {
    ...Image.args,
    modalTitle: 'Choose resource',
    inlineType: 'resource',
};