import { memo } from "react";

import { Icon, Image, ImageDragAndDrop, Modal } from "@ax/components";
import { useModal } from "@ax/hooks";
import type { IImage } from "@ax/types";

import * as S from "./style";

const ProfileImage = (props: IProfileImageProps) => {
	const { imageUrl, size = 96, handleImage } = props;

	const { isOpen, toggleModal } = useModal(false);

	const handleUpload = (images: IImage[]) => {
		handleImage(images[0]);
		toggleModal();
	};

	return (
		<>
			<S.FieldWrapper size={size} data-testid="profile-image-wrapper" onClick={toggleModal}>
				{imageUrl ? (
					<S.ImageContainer>
						<Image url={imageUrl} width={size} />
					</S.ImageContainer>
				) : (
					<S.DefaultImage>
						<S.IconWrapper>
							<Icon name="image" size="40" />
						</S.IconWrapper>
					</S.DefaultImage>
				)}
				<S.HoverOverlay>Edit Avatar</S.HoverOverlay>
			</S.FieldWrapper>
			<Modal isOpen={isOpen} hide={toggleModal} size="M" height={416} title="Upload Media">
				<ImageDragAndDrop
					siteID={"global"}
					isAllowedToUpload={true}
					handleUpload={handleUpload}
					visible={false}
					withCrop={true}
					maxImages={1}
				/>
			</Modal>
		</>
	);
};

export interface IProfileImageProps {
	imageUrl?: string;
	size?: number;
	handleImage: (image: IImage) => void;
}

export default memo(ProfileImage);
