import {forwardRef, memo} from 'react';
import {Tree, Input} from 'antd';
import {styled} from 'styled-components'
import useI18NPrefix from "../hooks/useI18NPrefix";
const { DirectoryTree } = Tree;
const { Search } = Input;

const component = forwardRef(({
   onSearch,
   treeData=[],
   onExpand=()=>{},
   onSelect=()=>{},
   // defaultExpandAll=true,
   multiple=false,
   extra,
   ...rest
 },ref) => {
  const t = useI18NPrefix('global');
  return (
    <div ref={ref}>
      <Search placeholder={t("placeholder.keyword")} allowClear onSearch={onSearch} style={{marginBottom:8}}/>
      {extra}
      <CustomTree
        icon={false}
        multiple={multiple}
        defaultExpandAll={true}
        onSelect={onSelect}
        onExpand={onExpand}
        treeData={treeData}
        {...rest}
      />
    </div>
  )
})

export const TreeMenu = memo(component)

const CustomTree = styled(DirectoryTree)`
  margin-top: 5px;
  .ant-tree-node-content-wrapper{
    padding-block-start: 5px;
    padding-block-end: 5px;
    padding-inline-start: 5px;
  }
  svg{
    margin-top: 10px;
    font-size: 15px;
  }

`
