import React, { ReactElement } from 'react';
import { ResetButton } from '@squiz/generic-browser-lib';
import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
import { ResourceBrowserResource } from '../../types';

import { CircledLoopIcon } from '../../Icons/CircledLoopIcon';

export type SelectedStateProps = {
    resource: ResourceBrowserResource;
    showThumbnail: boolean;
    icon: ReactElement | undefined;
    label: string;
    description: Array<ReactElement>;
    isDisabled?: boolean;
    onClear: () => void;
    resourcePickerContainer: any;
    isModalOpen?: boolean;
    onModalStateChange?(isOpen: boolean): void;
};

export const SelectedState = ({
    resource,
    showThumbnail,
    icon,
    label,
    description,
    isDisabled,
    onClear,
    resourcePickerContainer,
    isModalOpen,
    onModalStateChange,
}: SelectedStateProps) => {
    const modalController = {
        isOpen: isModalOpen,
        onOpenChange: onModalStateChange,
    };
    const replaceAsset = (
        <ModalTrigger
            overlayTriggerState={modalController}
            showLabel={false}
            label="Replace selection"
            containerClasses="selected-resource__replace text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed"
            icon={<CircledLoopIcon aria-hidden className="m-1" />}
            isDisabled={isDisabled}
            scope="squiz-rb-scope"
        >
            {resourcePickerContainer}
        </ModalTrigger>
    );

    return (
        <>
            {/* Left column */}
            {showThumbnail && resource.squizImage ? (
                <div className="selected-resource__thumbnail checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded">
                    <img
                        src={resource.squizImage.imageVariations.original.url || resource.url}
                        className="w-full h-full object-cover object-center"
                        alt={resource.squizImage.name || resource.name}
                    />
                </div>
            ) : (
                <div className="selected-resource__icon w-4 h-5 mt-1 flex self-start overflow-hidden">{icon}</div>
            )}
            {/* Center columns */}
            <div className="selected-resource__info justify-self-start self-center w-full overflow-hidden break-words">
                <span className="selected-resource__name">{label}</span>
                {description}
            </div>
            {/* End column */}
            <div className="selected-resource__actions flex">
                {replaceAsset}
                <ResetButton isDisabled={isDisabled} onClick={onClear} />
            </div>
        </>
    );
};