import {
	Slider,
	Form,
	InputNumber,
	Radio,
	Button,
	Select,
	Checkbox,
} from 'antd';
import {
	WeaRichText,
	WeaColorPicker,
} from 'ecCom';
import { i18n } from '../../../../public/i18n';
const {
	Option
} = Select;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const CheckboxGroup = Checkbox.Group;

const ckConfig = {
	toolbar: [{
		name: "markdown",
		items: ["Markdown"]
	}, {
		name: "basicstyles",
		items: [
			"Bold",
			"Italic",
			"Underline",
			"Strike",
			"RemoveFormat",
		]
	}, {
		name: "colors",
		items: ["TextColor", "BGColor"]
	}, {
		name: "paragraph",
		items: [
			"JustifyLeft",
			"JustifyCenter",
			"JustifyRight",
		]
	}, {
		name: "links",
		items: ["Link", "Unlink"]
	}, {
		name: "styles",
		items: ["Font", "FontSize"]
	}, ]
}

const components = {
	"inputNumber": (data) => <InputNumber ecId={`${this && this.props && this.props.ecId || ''}_InputNumber@icifgk`} min={0} onChange={data.onChange}/>,
	"radioGroup": (data) => (
		<RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@jvukwl`} onChange={data.onChange}>
			{data.options.map(opt => <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@dw5ru1@hrm`} value={opt.value}>{opt.name}</Radio>)}
        </RadioGroup>
	),
	"slider": (data) => <Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@z0k582`} onChange={data.onChange}/>,
	"radioButton": (data) => (
		<RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@s5sftz`} size="large" onChange={data.onChange}>
			{data.options.map(opt => <RadioButton ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@dam2im@hrm`} value={opt.value}>{opt.icon}</RadioButton>)}
      	</RadioGroup>
	),
	"color": (data) => <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@ojbz0x`} onChange={data.onChange}/>,
	"select": (data) => (
		<Select ecId={`${this && this.props && this.props.ecId || ''}_Select@l7s5m1`} onChange={data.onChange}>
			{data.options.map(opt => <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@m8juau@hrm`} value={opt.value}>{opt.name}</Option>)}
	    </Select>
	),
	"checkboxGroup": (data) => (
		<CheckboxGroup ecId={`${this && this.props && this.props.ecId || ''}_CheckboxGroup@q47p6i`} options={data.options} onChange={data.onChange} />
	),
	"richText": (data) => (
		<WeaRichText ecId={`${this && this.props && this.props.ecId || ''}_WeaRichText@ao3gwm`} placeholder={i18n.label.pleaseInputContent()} ref={data.onRef} onChange={data.onBlur} ckConfig={ckConfig} />
	),
	"checkbox": (data) => (
		<Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@2g319e`} onChange={data.onChange}>{data.name}</Checkbox>
	)
}

export default class Item extends React.Component {
	render() {
		const {
			data,
			form,
		} = this.props, {
			layout,
			label,
			key,
			type,
			otherParams
		} = data;

		return (
			<FormItem ecId={`${this && this.props && this.props.ecId || ''}_FormItem@oyctxu`}
	          {...data.layout}
	          label={data.label}
	        >
	          {form.getFieldDecorator(key,otherParams || {})(components[type](data))}
	        </FormItem>
		)
	}
}