import React, { useState } from 'react';
import { BoxSelectTree } from '@zhst/biz';
import { treeData, boxDataSource } from './mock'
import { Select, TreeProps, Modal, Checkbox } from 'antd';

const { Option } = Select

const demo = () => {
  const [activeKey, setActiveKey] = useState('1')
  const [searchType, setSearchType] = useState('1')
  const [searchVal, setSearchVal] = useState('')
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
  const [modal, contextHolder] = Modal.useModal();

  const onTreeCheck: TreeProps['onCheck'] = (keys: any) => {
    setCheckedKeys(keys)
  }

  const onBoxBatchDelete = () => {
    console.log('盒子批量删除', checkedKeys)
    modal.warning({
      content: (
        <div>
          <p>请确认是否从系统中删除盒子？</p>
          <Checkbox>所选盒子同时从系统中删除</Checkbox>
        </div>
      ),
      cancelText: '取消',
      okText: '确定',
      onOk() {},
      onCancel() {}
    })
  }

  return (
    <div style={{ border: '1px solid #ccc', width: '320px', minHeight: '900px' }}>
      {contextHolder}
      <BoxSelectTree
        data={activeKey === '1' ? treeData : boxDataSource}
        boxDataSource={boxDataSource}
        onSearch={e => console.log('搜索', e)}
        onCreateSubmit={async (_data) => {
          console.log('新建盒子', _data)
          return true
        }}
        onItemCheck={onTreeCheck}
        onItemSelect={e => console.log('onItemSelect', e)}
        onTabChange={val => setActiveKey(val)}
        onBoxBatchDelete={onBoxBatchDelete}
        onClockClick={() => console.log('时钟点击事件')}
        onImport={() => console.log('导入盒子')}
        tabsProps={{
          activeKey,
        }}
        searchInputProps={{
          addonBefore: (
            <Select
              value={searchType}
              dropdownMatchSelectWidth={false}
              onChange={_type => {
                setSearchType(_type)
                setSearchVal('')
              }}
              style={{ width: '72px' }}
            >
              {[
                { value: '1', label: '盒子' },
                { value: '2', label: '盒子组' }
              ].map(item => (
                <Option value={item.value}>{item.label}</Option>
              ))}
            </Select>
          ),
          onChange: e => setSearchVal(e.target.value),
          value: searchVal
        }}
        treeProps={{
          onItemDelete: data => console.log('删除', data),
          onItemSetting: data => console.log('配置事件', data),
          onItemRename: (data) =>console.log('重命名', data),
          onItemRenameFinish: async (val, data) => console.log('盒子重命名提交(返回boolean,控制弹框显示\隐藏)', val, data),
          checkedKeys,
        }}
      />
    </div>
  );
};

export default demo;