import React from 'react';
import {
    ResourceBrowserPlugin,
    ResourceBrowserUIProps,
    ResourceBrowserResource,
    ResourceBrowserSource,
    ResourceBrowserSelectedState,
    useResolveResourceResponse,
} from '../types';

// The plugin must conform to the Typescript interface ResourceBrowserPlugin
export default (): ResourceBrowserPlugin => {
    return {
        /**
         * The type of source this plugin handles. Plugins can only handle a single ResourceBrowserSource type, export multiple
         * plugins from your package with different types if you have a single codebase that can handle more than one type.
         *
         * This value needs to match the ResourceBrowserSource.type field that is passed to the ResourceBrowser via OnRequestSources.
         */
        type: 'exampleType',

        /**
         * Enables a div in the header of the ResourceBrowser modal for a plugin to insert content using React Portals.
         * DOM element is passed into the Functional Component created using the sourceBrowserComponent function.
         */
        headerPortal: false,

        /**
         * Provide a React Functional Component for browsing the ResourceBrowserSource type; this will be rendered within the
         * ResourceBrowers modal window when the source type is selected or if a pre-existing resource is being changed.
         *
         * The input props should be of the type ResourceBrowserUIProps so the ResourceBrowser can provide the following information:
         * @param source will contain the source information provided to the ResourceBrowser.
         * @param headerPortal (optional) may contain a DOM element for insertion of content using React Portals.
         * @param preselectedResource (optional) may contain a resource that is being changed to start open in your UI (optional).
         * @param onSelected should be called when a selection has been made and the ResourceBrowser should be closed.
         *
         * @returns ReactElement
         */
        sourceBrowserComponent: () => {
            // This should return a fucntion component, probably from another file.
            return (props: ResourceBrowserUIProps) => {
                return <></>;
            };
        },

        /**
         * Provide params to assist Resource Browser in rendering a preview of the selected resource to the end user.
         *
         * @param resource The resource which is to be rendered to the frontend UI
         *
         * @returns { showThumbnail } if true will render a preview thumbnail using the SquizImage data or the resource data.
         * @returns { icon } if showThumbnail evaluates to false this will be rendered to the left side of the resource label.
         * @returns { label } Label for the selected resource.
         * @returns { description } Description lines to provide additional information about the selected resource.
         */
        renderSelectedResource: (resource: ResourceBrowserResource): Promise<ResourceBrowserSelectedState> => {
            // ...Fetch information from source for resource here
            return Promise.resolve({
                showThumbnail: true, // If the resource is an image that can be previewed set this to true
                icon: undefined, // (optionally) otherwise provide an icon for render
                label: '', // Label or name of resource
                description: [], // (optional) extra details on the resource e.g. size, mime type etc
            });
        },

        /**
         * Provide a function to resolve a partial resource reference into a full data structure. Hooks may be used within.
         *
         * @param resourceId The id of the resource to resolve, this may be null if no resource is currently selected
         * @param source The source structure of the resource to resolve, this may be null before the source retrieval has completed
         *
         * @returns  { ResourceBrowserResource } Full data structure needed by the Resource Browser and its consumers.
         *
         */
        useResolveResource: (resourceId: string | null, source: ResourceBrowserSource | null): useResolveResourceResponse => {
            // ...Fetch information from source for resource here
            return {
                data:
                    resourceId && source
                        ? {
                              id: resourceId,
                              name: '',
                              url: '',
                              source: source,
                              type: {
                                  code: '',
                                  name: '',
                              },
                              squizImage: undefined,
                          }
                        : null,
                error: null,
                isLoading: false,
            };
        },

        // TODO: as they are worked out
        sourceSearchComponent: () => {
            return () => <></>;
        },
        renderResourceLauncher: () => {
            return () => <></>;
        },
    };
};