import React from "react";
import { Drawer, Input, Tree, Form } from "kts-xui";
import { Icon } from "kts-components-antd-x3";
import {IFormValues} from "@/InvoiceTypeModal";

export interface TaxClassificationProps {

    /** 是否开启 */
    open?: boolean;

    /** 数据 */
    list?: any[];

    /** 点击了取消 */
    onCancel?: () => void;

    /** 点击了选择 */
    onSelect?: (key: any, info: any) => void;

    /** 点击了加载 */
    onLoad: (value: any) => Promise<any[]>;

    /** 点击了搜索 */
    onSearch?: (value?: any) => void;
}

export default function TaxClassificationModal(props: TaxClassificationProps) {
    const [form] = Form.useForm<IFormValues>();

  const searchTax = React.useCallback(async (value?: any) => {
    if(!value?.target?.value) {
      form.resetFields();
    }
    props.onSearch && props.onSearch(value);
  }, [props.onSearch, form]);

    React.useEffect(() => {
      if (!props.open) {
        setTimeout(()=> {
          form.resetFields();
        }, 500)
      }
    }, [form, props.open])

    return (
      <Drawer
        title="商品和服务税收分类编码"
        placement="right"
        open={props.open}
        width={503}
        onClose={props.onCancel}
      >
        <Form
          form={form}
        >
          <Form.Item name='search'>
            <Input
              placeholder="请输入税收分类编码、税收分类名称进行检索"
              onChange={searchTax}
            />
          </Form.Item>
          <Form.Item name='tree'>
            <Tree
              onSelect={props.onSelect}
              loadData={props.onLoad}
              treeData={props.list}
              switcherIcon={<Icon type="down" />}
            />
          </Form.Item>
        </Form>
      </Drawer>
    )
}