import React from 'react';
import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
import PhotoLibraryRoundedIcon from '@mui/icons-material/PhotoLibraryRounded';
import { DOMAttributes } from '@react-types/shared';
import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
import { ErrorState } from './States/Error';
import { LoadingState } from './States/Loading';
import { SelectedState } from './States/Selected';
import { useSelectedState } from '../Hooks/useSelectedState';

import { ResourceBrowserResource, ResourceBrowserPlugin } from '../types';
import clsx from 'clsx';

export type ResourcePickerProps = {
    resource: ResourceBrowserResource | null;
    plugin: ResourceBrowserPlugin | null;
    allowedTypes: string[] | undefined;
    error: Error | null;
    isLoading: boolean;
    isOtherSourceValue: boolean;
    isDisabled?: boolean;
    children: (onClose: () => void, titleProps: DOMAttributes) => React.ReactElement;
    onClear: () => void;
    isModalOpen: boolean;
    onModalStateChange(isOpen: boolean): void;
};

export const ResourcePicker = ({
    resource,
    plugin,
    allowedTypes,
    error: externalError,
    isLoading: isExternalLoading,
    isOtherSourceValue,
    isDisabled,
    children,
    onClear,
    isModalOpen,
    onModalStateChange,
}: ResourcePickerProps) => {
    const { data: selectedState, error, isLoading } = useSelectedState({ resource, plugin });

    const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
    const isEmpty = resource === null && !isExternalLoading && !externalError;

    return (
        <div className={clsx('resource-picker', isDisabled && 'resource-picker--disabled')}>
            {isImagePicker ? (
                <PhotoLibraryRoundedIcon aria-hidden className="resource-picker__icon w-6 h-6" />
            ) : (
                <AdsClickRoundedIcon aria-hidden className="resource-picker__icon w-6 h-6" />
            )}
            {isOtherSourceValue && (
                // User is selecting a new image from a different source, render a loading spinner as we can't resolve the value
                <div className="resource-picker-info">
                    <div className="resource-picker-info__layout">
                        <LoadingState />
                        {/* Need to render the ModalTrigger still as it renders the <Modal/> */}
                        <ModalTrigger
                            overlayTriggerState={{
                                isOpen: isModalOpen,
                                onOpenChange: onModalStateChange,
                            }}
                            showLabel={false}
                            label=""
                            isDisabled={true}
                            scope="squiz-rb-scope"
                        >
                            {children}
                        </ModalTrigger>
                    </div>
                </div>
            )}
            {isEmpty && !isOtherSourceValue && (
                <ModalTrigger
                    overlayTriggerState={{
                        isOpen: isModalOpen,
                        onOpenChange: onModalStateChange,
                    }}
                    showLabel={true}
                    label={isImagePicker ? `Choose image` : `Choose asset`}
                    icon={
                        <AddCircleOutlineRoundedIcon
                            aria-hidden
                            className={`!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}`}
                        />
                    }
                    isDisabled={isDisabled}
                    scope="squiz-rb-scope"
                >
                    {children}
                </ModalTrigger>
            )}
            {!isEmpty && !isOtherSourceValue && (
                <div className="resource-picker-info">
                    <div className="resource-picker-info__layout">
                        {(isExternalLoading || isLoading) && <LoadingState />}
                        {(externalError || error) && (
                            <ErrorState error={(externalError as Error) || (error as Error)} isDisabled={isDisabled} onClear={onClear} />
                        )}
                        {!isExternalLoading && resource && selectedState && (
                            <SelectedState
                                isModalOpen={isModalOpen}
                                onModalStateChange={onModalStateChange}
                                resource={resource}
                                showThumbnail={selectedState?.showThumbnail || false}
                                icon={selectedState?.icon}
                                label={selectedState?.label}
                                description={selectedState?.description}
                                isDisabled={isDisabled}
                                onClear={onClear}
                                resourcePickerContainer={children}
                            />
                        )}
                    </div>
                </div>
            )}
        </div>
    );
};