import Taro from '@tarojs/taro'
import { View, Image } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CtsThumbProps } from 'types/thumb'

/**
 * 头像组件
 */
export default class CtsThumb extends CtsComponent<CtsThumbProps> {
	// static options = {
	//   addGlobalClass: true
	// }

	public static defaultProps: CtsThumbProps
	public static propTypes: InferProps<CtsThumbProps>

	public constructor(props: CtsThumbProps) {
		super(props)
		this.state = {}
	}

	public render(): JSX.Element {
		const { className, headImg, name, type, size } = this.props

		return (
			<View className={classNames('cts-thumb', className, size)}>
				{
					headImg ?
						<Image className={classNames('head-img')} style={{ borderRadius: type === 'circle' ? '50%' : Taro.pxTransform(10) }} src={headImg} mode='scaleToFill' />
						:
						<View className={classNames('thumb')} style={{ borderRadius: type === 'circle' ? '50%' : Taro.pxTransform(10) }}>{name ? name.substr(name.length - 2, 2) : ''}</View>
				}
			</View>
		)
	}
}

CtsThumb.defaultProps = {
	headImg: '',
	name: '',
	type: 'circle',
	size: 'normal'
}

CtsThumb.propTypes = {
	headImg: PropTypes.string,
	name: PropTypes.string,
	type: PropTypes.oneOf(['circle', 'square']),
	size: PropTypes.oneOf(['small', 'normal', 'big', 'large'])
}