import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import {
  CustomInput,
  CustomDatePicker,
  Digit,
  CustomCheckboxGroup,
  Picture,
  RadioButtonGroup,
  UserCitySelection,
  CustomMap,
  CustomTextArea,
  MultilineText,
  CustomLabel
} from '../index'
import { getArea, getUserCitySelection, loadData, getDicService } from '../../service/global'
import './index.scss'

interface Props {
  formItems?: any
  listItemChildren?: any
  parentTerm?: any
  onView?: any
  values?: any
  formDataOnChange?: any
  getInitialValue?: any
  term?: any
  help?: any
}

class Index extends Component<Props> {

  render() {
    let node: JSX.Element[] | JSX.Element;
    const { formItems, onView, listItemChildren, values, parentTerm, formDataOnChange, term, help, getInitialValue } = this.props;
    if (formItems && formItems.length !== 0) {
      node = formItems.map(item => {
        let el
        if (item.comp === 'Text') {
          el = <CustomInput
            onView={onView}
            name={item.props.name}
            term={item.props.term}
            onChange={(value) => formDataOnChange(value, item, parentTerm)}
            key={item.name}
            value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : ''}
            listItemChildren={listItemChildren}
          />
        } else if (item.comp === 'DateTime') {
          el = <CustomDatePicker
            onView={onView}
            {...item.props}
            key={item.name}
            onChange={(value) => formDataOnChange(value, item, parentTerm)}
            value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : ''}
            listItemChildren={listItemChildren}
          />
        } else if (item.comp === 'Digit') {
          el = <Digit
            onView={onView}
            {...item.props}
            key={item.name}
            onChange={(value) => formDataOnChange(value, item, parentTerm)}
            value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : ''}
            listItemChildren={listItemChildren}
          />
        } else if (item.comp === 'MultilineText') {
          if (Taro.getEnv() !== 'WEAPP') {
            el = <MultilineText
              onView={onView}
              {...item.props}
              key={item.name}
              onChange={(value) => formDataOnChange(value, item, parentTerm)}
              value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : ''}
              listItemChildren={listItemChildren}
            />
          } else {
            el = <CustomTextArea
              onView={onView}
              {...item.props}
              key={item.name}
              onChange={(value) => formDataOnChange(value, item, parentTerm)}
              value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : ''}
              listItemChildren={listItemChildren}
            />
          }
        } else if (item.comp === 'SingleSelection') {
          el = <RadioButtonGroup
            onView={onView}
            {...item.props}
            key={item.name}
            onChange={(value) => formDataOnChange(value, item, parentTerm)}
            value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : ''}
            loadDicData={getDicService}
            listItemChildren={listItemChildren}
          />
        } else if (item.comp === 'MultipleSelection') {
          el = <CustomCheckboxGroup
            onView={onView}
            {...item.props}
            key={item.name}
            onChange={(value) => formDataOnChange(value, item, parentTerm)}
            value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : []}
            loadDicData={getDicService}
            listItemChildren={listItemChildren}
          />
        } else if (item.comp === 'MobilePhone') {
          el = <CustomInput
            onView={onView}
            {...item.props}
            onChange={(value) => formDataOnChange(value, item, parentTerm)}
            type='phone'
            key={item.name}
            value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : []}
            listItemChildren={listItemChildren}
          />
        } else if (item.comp === 'Link') {
          el = <CustomInput
            onView={onView}
            {...item.props}
            onChange={(value) => formDataOnChange(value, item, parentTerm)}
            type='link'
            key={item.name}
            value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : ''}
            listItemChildren={listItemChildren}
          />
        } else if (item.comp === 'Picture') {
          el = <Picture
            onView={onView}
            {...item.props}
            key={item.name}
            onChange={(value) => formDataOnChange(value, item, parentTerm)}
            value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : []}
            listItemChildren={listItemChildren}
          />
        } else if (item.comp === 'UserCitySelection') {
          el = <UserCitySelection
            onView={onView}
            {...item.props}
            key={item.name}
            onChange={(value) => formDataOnChange(value, item, parentTerm)}
            value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : ''}
            loadData={loadData}
            getArea={getArea}
            getUserCitySelection={getUserCitySelection}
            listItemChildren={listItemChildren}
          />
        } else if (item.comp === 'PositionMap') {
          el = <CustomMap
            onView={onView}
            {...item.props}
            key={item.name}
            onChange={(value) => formDataOnChange(value, item, parentTerm)}
            value={values[parentTerm] && values[parentTerm][item.props.name] ? values[parentTerm][item.props.name] : ''}
            listItemChildren={listItemChildren}
          />
        }
        return el
      });
    } else {
      node = <View></View>;
    }
    return (
      <View className='list-item-container'>
        <View className='list-item-wrap'>
          <CustomLabel term={term} help={help} />
        </View>
        {node}
      </View>
    );
  }
}

export default Index