import { keys } from 'idb-keyval'
import '../css/list.css'
import { createSignal } from 'solid-js'
import { fetchData } from '../../../http/api'

type dataList = {
    id: string
}

interface Props {
    instanceData: Omit<dataList, 'messages'> & {
        title?:string,
        istop?:number
    },
    key: any,
    setList: Function,
    infoList: any,
    popShow: Function,
    setErrorFun:Function
}

export default ({ instanceData, key, setList, infoList, popShow,setErrorFun }: Props) => {

    //设置数据
    const instanceItem = instanceData
    let instance = instanceItem || { id: '', name: '' }
    const isTouchDevice = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0

    //置顶数据排序
    const getToppingItem = (arr: any) => {
        let toppingArr: { id: string, istop: boolean }[] = []
        let copyArr: any[]=[]
        arr.map((res: { istop: boolean; id: string }, i: number) => {
            if (res.istop) {
                copyArr.push(arr[i])
            }else{
                toppingArr.push(arr[i])
            }
        })
        // console.log([...copyArr,...toppingArr])
        return [...copyArr,...toppingArr]
    }

    //设置数据置顶
    const setItemTop = (uniqid: string, item: any) => {
        return new Promise((res, rej) => {
            fetchData({ uniqid }, function (data) {
                if (data.code === 200) {
                    item.istop = item.istop ? 0 : 1
                } else {
                    setErrorFun(data.message)
                }
                res(null)
            }, !item.istop?'/chat/top':'/chat/cancelTop', 'POST');
        })
    }

    //置顶排序
    const setDataTop = (e: MouseEvent, key: string) => {
        let arr = JSON.parse(JSON.stringify(infoList))
        let item = arr[key]
        setItemTop(item.uniqid, item).then(res=>{
            let toppindItem = getToppingItem(arr)
            setList('data', (list: null[]) => [...toppindItem])
        })
        e.stopPropagation()
    }

    return (
        <div
            class={[
                'group fi h-10 my-0.5 px-2 gap-2 hv-base rounded-md'
            ].join(' ')}
            
        >
            <div class="fcc w-8 h-8 rounded-full text-xl shrink-0">
                <div class="text-base i-carbon-chat" />
            </div>
            <div class="flex-1 truncate text-sm">{instance.title as any}</div>

            <div class={[isTouchDevice ? '' : 'hidden group-hover:block'].join('')}>
                <div
                    class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
                    onClick={() => popShow('open', null, null, instance.title)}
                >
                    <div class='add-new-icon'></div>
                </div>
            </div>

            <div class={[isTouchDevice || instance.istop === 1 ? '' : 'hidden group-hover:block'].join('')}>
                <div
                    class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
                    onClick={e => setDataTop(e, key())}
                >
                    <div class={[instance.istop === 1 ?'list-top-icon-b':'list-top-icon'].join('')}></div>
                </div>
            </div>

            <div class={isTouchDevice ? '' : 'hidden group-hover:block'}>
                <div
                    class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
                    onClick={e => popShow('delete', e, key())}
                >
                    <div class="i-carbon-close" />
                </div>
            </div>
        </div>
    )
}