import { useSetState } from "ahooks"
import { Button, Drawer,Space,Collapse, Input } from "antd"
import React, { useState } from "react"
import { CheckOutlined, DeleteOutlined, EditOutlined, RollbackOutlined} from "@ant-design/icons"

const {Panel} = Collapse

const QuestionModalButton:React.FC<any>=(props)=>{

    const {list,setList,readOnly} = props

    const [editInfo,setEditInfo] = useSetState<any>({
        sql:'',
        question:'',
        id:'',
    })

    const [eidtKey,setEditKey] = useState('')
    
    const [visible,setVisible] = useState(false)

    const openModal=()=>{
        setVisible(true)
    }

    const closeModal=()=>{
        setVisible(false)
    }

    const addItem=()=>{
        const key =  `add`;
        setEditInfo({
            id:key,
            question:'',
            sql:''
        })
        setEditKey(key)
        setList([{id:key},...list])
    }

    const save=()=>{
        const temp = list.map((i:any)=>{
            if(i.id===eidtKey){
                if(i.id===('add')){
                    return {...editInfo,id:new Date().getTime()}
                }else{
                    return editInfo
                }
            }else{
                return i
            }
        })
        setList(temp)
        setEditKey('')
        setEditInfo({
            id:'',
            question:'',
            sql:''
        })
    }

    const cancel=()=>{
        if((eidtKey||'')===('add')){
            const temp = list.filter((i:any)=>(i.id!==('add')))
            setList(temp)
        }
        setEditKey('')
        setEditInfo({
            id:'',
            question:'',
            sql:''
        })
    }

    const editItem=(item)=>{
        setEditInfo(item)
        setEditKey(item.id)
    }

    const deleteItem=(item)=>{
        const templist = list.filter((i:any)=>(item.id!==i.id))
        setList(templist)
    }

    return(
        <React.Fragment>
            <Button onClick={openModal}>资产标注</Button>
            <Drawer
                title="添加标注信息"
                visible={visible}
                width={800}
                onClose={closeModal}
            >
                <div style={{marginBottom:10,display:readOnly?'none':''}}>
                    <Space>
                        {eidtKey?(
                            <>
                                <Space>
                                    <Button type="primary" onClick={save}>保存</Button>
                                    <Button onClick={cancel}>返回</Button>
                                </Space>
                            </>
                        ):<Button onClick={addItem}>新增</Button>}
                    </Space>
                </div>
                <div style={{height:'calc(100% - 50px)',overflow:'auto'}}>
                    <Space direction="vertical" style={{width:'100%',marginTop:10}}>
                        {
                            list.map((item:any,key:any)=>{
                                if(item.id===eidtKey){
                                    return(
                                        <Collapse key={key} activeKey={'1'}>
                                            <Panel header={<Input prefix={<span>问题{key+1}：</span>} style={{width:'80%'}} placeholder="请输入提示词" value={editInfo.question} onChange={(e:any)=>{setEditInfo({question:e.target.value})}} />} key="1" extra={readOnly?undefined:(<Space>
                                                    <CheckOutlined 
                                                        onClick={(event)=>{
                                                            event.stopPropagation();
                                                            save()
                                                        }}
                                                    />
                                                    <RollbackOutlined 
                                                        onClick={(event)=>{
                                                            event.stopPropagation();
                                                            cancel()
                                                        }}
                                                    />
                                                </Space>)}>
                                                <Input.TextArea 
                                                    value={editInfo.sql}
                                                    autoSize={{minRows:4,maxRows:8}}
                                                    onChange={(e:any)=>{setEditInfo({sql:e.target.value})}}
                                                    placeholder="请输入答案SQL"
                                                />
                                            </Panel>
                                        </Collapse>
                                    )
                                }else{
                                    return(
                                        <Collapse key={key} collapsible="header" defaultActiveKey={['1']}>
                                            <Panel header={`问题${key+1}：${item?.question}`} key="1" extra={readOnly?undefined:(<Space>
                                                    <EditOutlined 
                                                        onClick={(event)=>{
                                                            event.stopPropagation();
                                                            editItem(item)
                                                        }}
                                                    />
                                                    <DeleteOutlined 
                                                        onClick={(event)=>{
                                                            event.stopPropagation();
                                                            deleteItem(item)
                                                        }}
                                                    />
                                                </Space>)}>
                                                {item.sql}
                                            </Panel>
                                        </Collapse>
                                    )
                                }
                            })
                        }
                    </Space>
                </div>
                
            </Drawer>
        </React.Fragment>
    )
}

export default QuestionModalButton