import { memo } from "react";

import { ImageDragAndDrop } from "@ax/components";
import type { IGetFolderParams, IImage } from "@ax/types";

import DetailPanel from "./DetailPanel";

import * as S from "./style";

const GalleryPanel = (props: IGalleryPanelProps) => {
	const { selectedImage, setImage, scope, currentFolderID, isAllowedToAdd, isAllowedToEdit, handleUpload, getParams } =
		props;

	return (
		<S.GalleryPanel>
			{!selectedImage ? (
				<ImageDragAndDrop
					folderID={currentFolderID}
					handleUpload={handleUpload}
					siteID={scope}
					isAllowedToUpload={isAllowedToAdd}
				/>
			) : (
				<DetailPanel
					selectedImage={selectedImage}
					setImage={setImage}
					isAllowedToEdit={isAllowedToEdit}
					getParams={getParams}
				/>
			)}
		</S.GalleryPanel>
	);
};

export interface IGalleryPanelProps {
	selectedImage: IImage | null;
	setImage: (fileData: any) => void;
	scope: number | "global";
	currentFolderID: number | null;
	handleUpload: (file: IImage[]) => void;
	isAllowedToEdit: boolean;
	isAllowedToAdd: boolean;
	getParams(): IGetFolderParams;
}

export default memo(GalleryPanel);
