import React from 'react';
import { useLibrary, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';

export interface IFile {
	url: string;
	mime: string;
	name?: string;
	alternativeText?: string;
}
interface IMediaLibraryProps {
	isOpen: boolean;
	onChange(assets: Array<IFile>): void;
	onToggle(value: React.SetStateAction<boolean>): void;
}

const MediaLibrary = ({ isOpen, onChange, onToggle }: IMediaLibraryProps) => {
	const { components } = useLibrary();
	const MediaLibraryDialog = components?.['media-library'];

	if (MediaLibraryDialog == null) {
		return null;
	}

	const handleSelectAssets = (files: Array<IFile>) => {
		const formattedFiles = files?.map((file) => ({
			...file,
			alt: file.alternativeText || file.name,
			url: prefixFileUrlWithBackendUrl(file.url) ?? '',
			mime: file.mime
		}));

		onChange(formattedFiles);
	};

	if (!isOpen) return <></>;

	// @ts-ignore
	return <MediaLibraryDialog onClose={onToggle} onSelectAssets={handleSelectAssets} />;
};

export default MediaLibrary;