'use client'
import React, {useEffect, useState} from 'react';
import {Button, ColorPicker, Dropdown, MenuProps, Space, Switch, Table} from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import {taskPriorityList, taskStateList, taskTreeResult} from "@/app/lib/task/project/data";
import {DataType, ResponseVO, ResultPage} from "@/app/lib/definitions";
import {DownOutlined} from "@ant-design/icons";
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
import OperationButton from "@/app/ui/task/project/OperationButton";

type TableRowSelection<T> = TableProps<T>['rowSelection'];


const columns: TableColumnsType<DataType> = [
    {
        title: '任务编码',
        dataIndex: 'code',
        key: 'code',
        width: '10%',
    },
    {
        title: '任务名称',
        dataIndex: 'name',
        key: 'name',
        width: '20%',
    },
    {
        title: '任务描述',
        dataIndex: 'description',
        width: '30%',
        key: 'description',
    },
    {
        title: '任务状态',
        dataIndex: 'state',
        width: '10%',
        key: 'state',
    },
    {
        title: '优先级',
        dataIndex: 'priority',
        width: '10%',
        key: 'priority',
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: '10%',
        key: 'action',
    },
];



// rowSelection objects indicates the need for row selection
const rowSelection: TableRowSelection<DataType> = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
    },
};

const TreeTable: React.FC = () => {
    function recursionActionChild(children:DataType[]){
        if (children.length===0){
            return;
        }
        for (let item of children) {
            item.key=item.id;
            item.action=(<OperationButton itemId={item.id} pid={item.pid} pPid={item.pPid} refreshDate={refreshDate}/>)
            item.state=taskStateList.find(taskState=>taskState.code===item.state?.toString())?.name;
            item.priority=taskPriorityList.find(taskPriority=>taskPriority.code===item.priority?.toString())?.name;
            if (item.children&&item.children.length>0){
                recursionActionChild(item.children)
            }else {
                item.children=undefined
            }
        }
    }
    // const [checkStrictly, setCheckStrictly] = useState(false);
    const [data, setData] = useState<DataType[]>([]);
    const [pageNumber, setPageNumber] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(10);
    const refreshDate=():void=>{
        taskTreeResult().then((result:ResponseVO<ResultPage<DataType>>)=>{
            if (result.status.success){
                recursionActionChild(result.data.content);
                setData(result.data.content)
            }
        })
    }
    useEffect(() => {
        refreshDate();
    }, []);
    return (
        <>
            {/*<Space align="center" style={{ marginBottom: 16 }}>*/}
            {/*    CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />*/}
            {/*</Space>*/}
            {/*<ColorPicker defaultValue="#1677ff" showText/>*/}
            <Table
                columns={columns}
                // rowSelection={{ ...rowSelection, checkStrictly}}
                dataSource={data}
            />
        </>
    );
};

export default TreeTable;