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

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

interface IState {
	status: boolean
}
/**
 * 切换按钮
 */
export default class CtsSwitch extends CtsComponent<CtsSwitchProps, IState> {
	// static options = {
	//   addGlobalClass: true
	// }

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

	public constructor(props: CtsSwitchProps) {
		super(props)
		console.log('constructor', props);

		this.state = {
			status: props.value || false
		}
	}

	// 切换事件
	private switchChange() {
		this.setState({
			status: !this.state.status
		})
		this.props.onChange(!this.state.status)
	}

	public render(): JSX.Element {
		const { status } = this.state
		const { showText, className } = this.props

		return (
			<View className={classNames('cts-switch', className, { 'cur': status })} onClick={() => this.switchChange()}>
				<View className='cts-switch-content'>
					<View className='content-circle'></View>
					{showText && <View className='content-text'>
						<Text className='content-text-item content-text-true'>是</Text>
						<Text className='content-text-item content-text-false'>否</Text>
					</View>}
				</View>
			</View>
		)
	}
}

CtsSwitch.defaultProps = {
	showText: false,
	value: false,
	onChange() { }
}

CtsSwitch.propTypes = {
	showText: PropTypes.bool,
	value: PropTypes.bool,
	onChange: PropTypes.func
}