import { useState } from "react";
import type { Area } from "react-easy-crop";

import CropView from "./CropView";
import UploadView from "./UploadView";

import * as S from "./style";

const ImageStep = (props: IProps) => {
	const { userImage, onCropConfirmed, onSkip } = props;

	const [imageSrc, setImageSrc] = useState<string | null>(userImage || null);

	return (
		<S.Wrapper>
			<S.InfoWrapper>
				<S.Title>Upload Your Profile Picture</S.Title>
				<S.Text>
					Customize how people see you. If you don't upload a picture, one will be generated based on your initials and
					a random color.
				</S.Text>
			</S.InfoWrapper>
			<S.ImageWrapper>
				{!imageSrc ? (
					<UploadView onImageLoaded={setImageSrc} onSkip={onSkip} />
				) : (
					<CropView
						imageSrc={imageSrc}
						onConfirm={(croppedAreaPixels) => onCropConfirmed(imageSrc, croppedAreaPixels)}
						onUploadNew={() => setImageSrc(null)}
					/>
				)}
			</S.ImageWrapper>
		</S.Wrapper>
	);
};

interface IProps {
	userImage?: string;
	onCropConfirmed: (imageSrc: string, croppedAreaPixels: Area) => void;
	onSkip: () => void;
}

export default ImageStep;
