<script>
export default {
	name: 'ElAvatar',

	props: {
		size: {
			type: [Number, String],
			validator(val) {
				if (typeof val === 'string') {
					return ['large', 'medium', 'small'].includes(val);
				}
				return typeof val === 'number';
			}
		},
		shape: {
			type: String,
			default: 'circle',
			validator(val) {
				return ['circle', 'square'].includes(val);
			}
		},
		icon: String,
		src: String,
		alt: String,
		srcSet: String,
		error: Function,
		fit: {
			type: String,
			default: 'cover'
		}
	},

	data() {
		return {
			isImageExist: true
		};
	},

	computed: {
		avatarClass() {
			const { size, icon, shape } = this;
			let classList = ['el-avatar'];

			if (size && typeof size === 'string') {
				classList.push(`el-avatar--${ size }`);
			}

			if (icon) {
				classList.push('el-avatar--icon');
			}

			if (shape) {
				classList.push(`el-avatar--${ shape }`);
			}

			return classList.join(' ');
		}
	},

	methods: {
		handleError() {
			const { error } = this;
			const errorFlag = error ? error() : undefined;
			if (errorFlag !== false) {
				this.isImageExist = false;
			}
		},
		renderAvatar() {
			const { icon, src, alt, isImageExist, srcSet, fit } = this;

			if (isImageExist && src) {
				return <img
					src={src}
					onError={this.handleError}
					alt={alt}
					srcSet={srcSet}
					style={{ 'object-fit': fit }}/>;
			}

			if (icon) {
				return (<i class={icon} />);
			}

			return this.$slots.default;
		}
	},

	render() {
		const { avatarClass, size } = this;

		const sizeStyle = typeof size === 'number' ? {
			height: `${ size }px`,
			width: `${ size }px`,
			lineHeight: `${ size }px`
		} : {};

		return (
			<span class={ avatarClass } style={ sizeStyle }>
				{
					this.renderAvatar()
				}
			</span>
		);
	}

};
</script>
