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

export default {
    title: 'Source dropdown container',
    component: SourceDropdownContainer,
} as Meta<typeof SourceDropdownContainer>;

const Template: StoryFn<typeof SourceDropdownContainer> = (props) => {
    return (
        <div className="m-3">
            <SourceDropdownContainer {...props}>{props.children}</SourceDropdownContainer>
        </div>
    );
};

export const Primary = Template.bind({});
Primary.args = {
    isCollapsed: false,
    onExpand: () => {
        console.log('expanded');
    },
    children: (
        <div className="flex items-center h-[36px]">
            <span className="mr-3">Child component</span>
        </div>
    ),
};

export const Collapsed = Template.bind({});
Collapsed.args = {
    isCollapsed: true,
    onExpand: () => {
        console.log('expanded');
    },
    children: (
        <div className="flex items-center h-[36px]">
            <span className="mr-3">Child component</span>
        </div>
    ),
};

export const DropdownExample = Template.bind({});
DropdownExample.args = {
    isCollapsed: false,
    onExpand: () => {
        console.log('expanded');
    },
    children: (
        <div className="border-l border-blue-200 pl-1 w-[204px]">
            <SourceDropdown
                selectedSource={sampleSources[0] as ResourceBrowserSource}
                sources={sampleSources as ResourceBrowserSource[]}
                onSourceSelect={(source) => alert(`Source Select: ${source.name}`)}
            />
        </div>
    ),
};