import { ComponentType, DetailedHTMLProps, HTMLAttributes } from 'react';
import { LazyLoadImageProps } from 'react-lazy-load-image-component';
import { BoxProps, Theme } from '@mui/material';
import { MUIStyledCommonProps, ResponsiveStyleValue } from '@mui/system';
import { Property } from 'csstype';

export interface ImageProps
	extends BoxProps<'span'>,
		Pick<
			LazyLoadImageProps,
			| 'alt'
			| 'src'
			| 'delayTime'
			| 'delayMethod'
			| 'threshold'
			| 'beforeLoad'
			| 'placeholder'
			| 'wrapperProps'
			| 'scrollPosition'
			| 'visibleByDefault'
			| 'wrapperClassName'
			| 'useIntersectionObserver'
			| 'placeholderSrc'
			| 'srcSet'
		> {
	aspectRatio?:
		| ResponsiveStyleValue<Property.AspectRatio | readonly NonNullable<Property.AspectRatio | undefined>[] | undefined>
		| ((
				theme: Theme
		  ) => ResponsiveStyleValue<
				Property.AspectRatio | readonly NonNullable<Property.AspectRatio | undefined>[] | undefined
		  >)
		| null;
	/**
	 * @default false
	 */
	disabledEffect?: boolean;
	/**
	 * @default 'cover'
	 */
	objectFit?:
		| ResponsiveStyleValue<Property.ObjectFit | readonly NonNullable<Property.ObjectFit | undefined>[] | undefined>
		| ((
				theme: Theme
		  ) => ResponsiveStyleValue<
				Property.ObjectFit | readonly NonNullable<Property.ObjectFit | undefined>[] | undefined
		  >)
		| null;
	ref?: React.Ref<HTMLSpanElement>;
	/**
	 * Name of the effect to use.
	 * @default 'blur'
	 */
	effect?: LazyLoadImageProps['effect'];
	slotProps?: {
		img?: BoxProps<ComponentType<LazyLoadImageProps>>;
		overlay?: MUIStyledCommonProps<Theme> & DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
	};
}

declare module '@mui/material' {
	interface Components {
		ReevolveImage?: {
			defaultProps?: Partial<ImageProps>;
		};
	}
}