import React, { createElement, useState, useEffect, Component } from 'react';
import { Divider, Select, Button, Radio, Checkbox, Input, Icon, Balloon } from '@alifd/next';
import Item from './components/Item';
import './index.scss';

interface RuleSetterProps {
  onChange: (any) => void;
  value: any;
  type: string[];
}

const RuleSetter: React.FC<RuleSetterProps> = (props) => {
  const { type, value=[], onChange } = props;

  const edit = (index,obj)=>{
    onChange(type.map((e,i)=>{
      if(i===index) return obj
      return value[i]||{type:e,message:'',checked:false}
    }))
  }

  return (
    <div>
      {type.map((e,i) => (
        <Item info={e} value={value[i]||{message:'',checked:false}} edit={obj=>edit(i,obj)}></Item>
      ))}
    </div>
  );
};

export default class extends Component<RuleSetterProps> {
  render() {
    return <RuleSetter {...this.props} />;
  }
}