import React, { forwardRef, useMemo } from 'react';
import MainContainer from '../MainContainer/MainContainer';
import { ResourceBrowserInputProps } from '../ResourceBrowserInput/ResourceBrowserInput';
import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
import { InlineLoadingErrorState } from './InlineLoadingErrorState/InlineLoadingErrorState';
import { ImageInline } from '../Icons/ImageInline';
import { LinkInline } from '../Icons/LinkInline';
import { InlineType } from '../types';
import { AdsClickIcon } from '../Icons/AdsClickIcon';

export type ResourceBrowserInlineButtonProps = ResourceBrowserInputProps & {
    inlineType: InlineType;
    onRetry: () => void;
};

export const ResourceBrowserInlineButton = forwardRef<HTMLButtonElement, ResourceBrowserInlineButtonProps>((props, forwardRef) => {
    const {
        inlineType,
        modalTitle,
        allowedTypes,
        onChange,
        onRetry,
        value,
        useResource,
        isDisabled,
        plugin,
        pluginMode,
        searchEnabled,
        source,
        sources,
        isLoading,
        error,
        setSource,
        isModalOpen,
        onModalStateChange,
    } = props;

    // If an error happens loading the resource the inline browser just opens without it as if no preselectedResource is provided
    const { data: resource, isLoading: isResourceLoading } = useResource(value || null, source);

    const inlineTypePickerLabels = useMemo(
        () => ({
            image: 'Change image',
            link: 'Change link',
            resource: 'Change resource',
        }),
        [inlineType],
    );
    const inlineTypePickerIcons = useMemo(
        () => ({
            image: <ImageInline aria-label="change image" />,
            link: <LinkInline aria-label="change link" />,
            resource: <AdsClickIcon aria-label="change resource" />,
        }),
        [inlineType],
    );

    return (
        <div className="inline-launch-button">
            <ModalTrigger
                ref={forwardRef}
                overlayTriggerState={{
                    isOpen: isModalOpen,
                    onOpenChange: onModalStateChange,
                }}
                showLabel={false}
                label=""
                icon={inlineTypePickerIcons[inlineType]}
                isDisabled={isDisabled}
                scope="squiz-rb-scope"
                containerClasses="inline-launch-button__button"
            >
                {(onClose, titleProps) => (
                    <>
                        {(isLoading || isResourceLoading || error) && (
                            <InlineLoadingErrorState
                                title={modalTitle}
                                titleAriaProps={titleProps}
                                onClose={onClose}
                                onRetry={onRetry}
                                isLoading={isLoading || isResourceLoading}
                                error={error}
                            />
                        )}
                        {!(isLoading || isResourceLoading) && !error && (
                            <MainContainer
                                selectedSource={source}
                                sources={sources}
                                preselectedResource={resource}
                                plugin={plugin}
                                pluginMode={pluginMode}
                                searchEnabled={searchEnabled}
                                title={modalTitle}
                                titleAriaProps={titleProps}
                                allowedTypes={allowedTypes}
                                onSourceSelect={setSource}
                                onClose={onClose}
                                onChange={onChange}
                            />
                        )}
                    </>
                )}
            </ModalTrigger>
            <div className="inline-launch-button__label">{inlineTypePickerLabels[inlineType]}</div>
        </div>
    );
});