/*
* @Author: zhouningyi
* @Date: 2016-12-26 11:55:57
*/

import React, { Component, PropTypes } from 'react';

import './index.css';
import Utils from './../../lib/utils';
import UiBase from './../uiBase';

//基本类型
import Slider  from './../Slider';
import Input   from './../Input';
import Color   from './../Color';
import Group   from './../Group';
import Select  from './../Select';
import RangeSlider from './../RangeSlider';
//复合类型
import Range   from './../Range';
import Gradient from './../Gradient';
import Toggle from './../Toggle';
import MultiSelect from './../MultiSelect';
import Binding from './../Binding';

const all = {
  //基本类型
  slider: Slider,
  color:  Color,
  input:  Input,
  group:  Group,
  select: Select,
  toggle: Toggle,
  rangeSlider: RangeSlider,
  //复合类型
  range: Range,
  gradient: Gradient,
  multiSelect: MultiSelect,
  binding: Binding
};

const getCom = type => all[type];

export default class Tag extends UiBase {
  static propTypes = {
    data:           PropTypes.any.isRequired,
    onChange:       PropTypes.func.isRequired,
    onFinishChange: PropTypes.func,
  }
  constructor(props: any) {
    super(props);
  }
  onUITypeChange = (data, isOpenEditor) => {
    this.setState({data, isOpenEditor});
  }
  render(){
    const {state} = this;
    const {uiType} = state.data;
    const TagUI = getCom(uiType);
    if(!TagUI) return console.log(`组件类型为${uiType}的没找到...`);
    return (
      <TagUI
        onUITypeChange={this.onUITypeChange}
        {...this.props}
        data={this.state.data}
        isOpenEditor={state.isOpenEditor}
      />
    );
  }
}