import React from 'react';
import { Button } from 'kts-xui';
import { TaxClassificationModal } from '../../..'; 

export default () => {

  const [open, setOpen] = React.useState(false);

  const [list, setList] = React.useState<any>([]);

  const [info, setInfo] = React.useState({});

  const updateTreeData = (list: any, key: React.Key, children: any): any => { 
    const demo = list.map((node: any) => {
      if (node.key === key) {
        return {
          ...node,
          children,
        };
      }
      if (node.children) {
        return {
          ...node,
          children: updateTreeData(node.children, key, children),
        };
      }
      return node;
    });
    setList(demo);
  }

  const onSearch = React.useCallback(async (value: any = null) => { 
    const arr = [
      {
        "id": "3a4eae5278cd428f975d4da278fd18eb",
        "taxCategoryCode": "3000000000000000000",
        "productName": "销售服务",
        "shorthand": "销售服务",
        "specification": null,
        "createTime": "Tue Jun 20 14:56:46 CST 2023",
        "status": 1,
        "versionCode": "48.0",
        "version": "32.0",
        "startTime": "20190401",
        "endTime": null,
        "cargo": null,
        "desc": null,
        "taxRate": "13",
        "keyword": "",
        "summarizedItem": "Y",
        "countCode": null,
        "customsItem": null,
        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
      },
      {
        "id": "3a4eae5278cd428f975d4da278fd18db",
        "taxCategoryCode": "410000000000000000",
        "productName": "手机服务",
        "shorthand": "手机服务",
        "specification": null,
        "createTime": "Tue Jun 20 14:56:46 CST 2023",
        "status": 1,
        "versionCode": "48.0",
        "version": "32.0",
        "startTime": "20190401",
        "endTime": null,
        "cargo": null,
        "desc": null,
        "taxRate": "13",
        "keyword": "",
        "summarizedItem": "Y",
        "countCode": null,
        "customsItem": null,
        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
      }
    ];
    const list: any[] = arr.map((item: any)=> {
      const data = {
        ...item,
        title: `${item.productName} ${item.taxCategoryCode}`,
        key: item.taxCategoryCode,
      }
      if(value?.target?.value) { 
        data.isLeaf = true;
      } else { 
        data.selectable = false
      }
      return data
    });
    setList(list);
  }, []);

  const onLoad = React.useCallback(async (value?: any) => { 
    const arr = [
      {
        "id": "3a4eae5278cd428f975d4da278fd18eb",
        "taxCategoryCode": "00000100000000000000",
        "productName": "子任务1",
        "shorthand": "销售服务",
        "specification": null,
        "createTime": "Tue Jun 20 14:56:46 CST 2023",
        "status": 1,
        "versionCode": "48.0",
        "version": "32.0",
        "startTime": "20190401",
        "endTime": null,
        "cargo": null,
        "desc": null,
        "taxRate": "13",
        "keyword": "",
        "summarizedItem": "Y",
        "countCode": null,
        "customsItem": null,
        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
      },
      {
        "id": "3a4eae5278cd428f975d4da278fd18db",
        "taxCategoryCode": "000002000000000001",
        "productName": "子任务2",
        "shorthand": "手机服务",
        "specification": null,
        "createTime": "Tue Jun 20 14:56:46 CST 2023",
        "status": 1,
        "versionCode": "48.0",
        "version": "32.0",
        "startTime": "20190401",
        "endTime": null,
        "cargo": null,
        "desc": null,
        "taxRate": "13",
        "keyword": "",
        "summarizedItem": "Y",
        "countCode": null,
        "customsItem": null,
        "updateTime": "Tue Jun 20 14:56:46 CST 2023"
      }
    ];
    const data: any[] = arr.map((item: any)=> {
      return {
        ...item,
        title: `${item.productName} ${item.taxCategoryCode}`,
        key: item.taxCategoryCode,
        selectable: false
      }
    }); 
    if(value?.key) {
      setList((origin: any)=> {
        updateTreeData(origin, value.key, data)
      });
    } else {
      setList(data);
    }
    return [];
  }, []);

  const onClick = React.useCallback(async () => {
    await onLoad();
    setOpen(true);
  }, []);

  const onSelect = React.useCallback((key: any, info: any) => {  
    setInfo(info.node);
    // setOpen(false);
  }, []);
  const onSubmit = React.useCallback((key: any, info: any) => {   
    setOpen(false);
  }, []);

    return (
        <>
            <Button onClick={onClick} >打开</Button>
            <TaxClassificationModal
              list={list}
              open={open} 
              info={info}
              onSubmit={onSubmit}
              onSelect={onSelect}
              onCancel={()=> {setOpen(false); setInfo({});}}
              onSearch={onSearch}
              onLoad={onLoad}
            /> 
        </>
    )
};