import { memo } from "react";

import FileDragAndDrop from "@ax/modules/FileDrive/FileDragAndDrop";
import type { IFile } from "@ax/types";

import DetailPanel from "./DetailPanel";

import * as S from "./style";

const GalleryPanel = (props: IGalleryPanelProps) => {
	const {
		selectedFile,
		setFile,
		scope,
		currentFolderID,
		isAllowedToAdd,
		isAllowedToEdit,
		customFormats,
		handleUpload,
	} = props;

	return (
		<S.GalleryPanel>
			{!selectedFile ? (
				<FileDragAndDrop
					folderID={currentFolderID}
					handleUpload={handleUpload}
					siteID={scope}
					isAllowedToUpload={isAllowedToAdd}
					customFormats={customFormats}
				/>
			) : (
				<DetailPanel selectedFile={selectedFile} setFile={setFile} isAllowedToEdit={isAllowedToEdit} />
			)}
		</S.GalleryPanel>
	);
};

export interface IGalleryPanelProps {
	selectedFile: IFile | null;
	customFormats?: string[];
	setFile: (fileData: any) => void;
	scope: number | "global";
	currentFolderID: number | null;
	handleUpload: (file: IFile[]) => void;
	isAllowedToEdit: boolean;
	isAllowedToAdd: boolean;
}

export default memo(GalleryPanel);
