import React, { createElement, useEffect, useState } from 'react';
import { Checkbox, Icon, Balloon, Input, Box, Switch } from '@alifd/next';

interface ItemProps {
  info: { label: string,value:string,link:any[] };
  add: (label: { label: string,value:string,link:any[] }) => void;
  del: () => void;
}

const Item: React.FC<ItemProps> = (props) => {
  const { info, add, del } = props;

  const [visible, setVisible] = useState(false);
  const [label,setLabel] = useState(info.label)
  const [value,setVallue] = useState(info.value)
  const [link] = useState(info?.link||[])

  const handleInput = (val,type)=>{
    if(type==='label'){
      setLabel(val)
      setVallue(val)
    }else{
      setVallue(val)
    }
  }

  useEffect(()=>{
    add({
      label,
      value,
      link
    })
  },[label,value])

  return (
    <Balloon
      v2
      trigger={
        <div className="item">
          <div className="item-line">
            {info.label}
            <Box spacing={10} direction="row">
              <Icon onClick={() => setVisible(true)} className="rule_item_icon" type="edit" />
              <Icon onClick={del} className="rule_item_icon" type="ashbin" />
            </Box>
          </div>
        </div>
      }
      visible={visible}
      align="l"
      triggerType="click"
      onClose={(_) => setVisible(false)}
      style={{ width: 300 }}
    >
      <div className="flex-g10 item-mr">
        显示值
        <Input style={{ flex: 1 }} value={label} onChange={e=>handleInput(e,'label')} />
      </div>
      <div className="flex-g10 item-mr">
        选项值
        <Input style={{ flex: 1 }} value={value} onChange={e=>handleInput(e,'value')} />
      </div>
    </Balloon>
  );
};

export default Item;