import React, { createElement, useState, useEffect, Component } from 'react';
import { Button, Icon, Dialog, NumberPicker } from '@alifd/next';
import './index.scss'


interface ColorDialogSetterProps {

}

const Divider = ()=>{
  return <div className='divider'>
    <div className='divider-line'></div>
  </div>
}
const CircleBotton = ({type,onClick})=>{
  return <div className='circle-botton' onClick={onClick} >
    <Icon type={type} size='xs' style={{ color: '#fff'}} />
  </div>
}

const ColorDialogSetter = (props)=>{
  const { value , onChange } = props
  
  const [colors,setColors] = useState(value||[])
  const [visible,setVisible] = useState(false)

  useEffect(()=>{
    onChange(value||[])
  },[])

  // 添加一项
  const pushColors = ()=>{
    setColors([...colors,{start:null,end:null,color:'#ffffff'}])
  }
  // 删除一项
  const delColors = (index)=>{
    const temp = colors.filter((_,i)=>i!==index)
    setColors(temp)
  }

  // 范围修改
  const rangeChange = (value,index,type)=>{
    let temp = JSON.parse(JSON.stringify(colors))
    temp[index][type] = value
    setColors(temp)
  }
  // 颜色修改
  const colorChange = (value,index)=>{
    let temp = JSON.parse(JSON.stringify(colors))
    temp[index].color = value.target.value
    setColors(temp)
  }

  // 确认提交
  const submit = ()=>{
    onChange(colors)
    setVisible(false)
  }

  return(
    <div className='color-dialog'>
      {colors.length>0?'已进行颜色范围配置':''}
      <Button 
        type="primary" 
        iconSize="xxs" 
        text
        onClick={()=>setVisible(true)}
        ><Icon type="edit" style={{marginRight:'5px'}} />编辑</Button>
      <Dialog
          title="颜色范围设置"
          visible={visible}
          onOk={submit}
          onCancel={()=>setVisible(false)}
          footerActions={['cancel', 'ok']}
      >   
          {colors.map((e,i)=><div key={i}>
            <div className='color-row'>
              <span>颜色范围</span>
              <NumberPicker min={0} max={100} defaultValue={e.start} onChange={(v)=>rangeChange(v,i,'start')} />
              <Divider />
              <NumberPicker min={Math.min(e.start+1,100)} max={100} defaultValue={e.end} onChange={(v)=>rangeChange(v,i,'end')} />
              <div className='color-set'>
                <input className='color-ref' type='color' value={e.color} onChange={v=>colorChange(v,i)} />
                <span className='color-val'>{e.color}</span>
              </div>
              <CircleBotton type='minus' onClick={(_)=>delColors(i)} />
            </div>
          </div>)}
          <div className='color-add'>
            <CircleBotton type='add' onClick={pushColors} />
          </div>
      </Dialog>
    </div>
  )
}

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