import React from "react";
import TreeSelect from "../TreeSelect";

const dummyData = [
  {
    value: "parent 1",
    title: "parent 1",
    children: [
      {
        value: "parent 1-0",
        title: "parent 1-0",
        children: [
          {
            value: "leaf1",
            title: "leaf1",
          },
          {
            value: "leaf2",
            title: "leaf2",
          },
          {
            value: "leaffda2",
            title: "leaf2",
          },
          {
            value: "lefaaf2",
            title: "leaf2",
          },
        ],
      },
      {
        value: "parent 1-1",
        title: "parent 1-1",
        children: [
          {
            value: "leaf3",
            title: <>leaf3</>,
          },
          {
            value: "leaf4",
            title: <>leaf4</>,
          },
          {
            value: "leaf5",
            title: <>leaf53</>,
          },
          {
            value: "leaf36",
            title: <>leaf36</>,
          },
        ],
      },
    ],
  },
  {
    value: "parent 2",
    title: "parent 2",
    children: [
      {
        value: "parent 2-0",
        title: "parent 2-0",
        children: [
          {
            value: "leaf2-1",
            title: "leaf1",
          },
          {
            value: "leaf2-2",
            title: "leaf2",
          },
          {
            value: "leaffda2-3",
            title: "leaf2",
          },
          {
            value: "lefaaf2-4",
            title: "leaf2",
          },
        ],
      },
      {
        value: "parent 2-1",
        title: "parent 2-1",
        children: [
          {
            value: "leaf2-2-1",
            title: <>leaf3</>,
          },
          {
            value: "leaf2-2-2",
            title: <>leaf4</>,
          },
          {
            value: "leaf2-3-3",
            title: <>leaf53</>,
          },
          {
            value: "leaf2-4-4",
            title: <>leaf36</>,
          },
        ],
      },
    ],
  },
];

const TreeSelectDemo = (props) => {
  return (
    <TreeSelect
      label={props.label}
      showSearch={props.search || false}
      disabled={props?.disabled || false}
      treeData={dummyData}
      value={props.value}
      allowClear
      // onChange={(data) => {
      //   props.change({ [props.name]: data });
      // }}
      // placeholder={
      //   <div style={{ display: "flex", alignItems: "center" }}>
      //     <div>{props.icon}</div>
      //     <div style={{ marginLeft: 6 }}>{props.text}</div>
      //   </div>
      // }
      showArrow={true}
      // treeCheckable={props.status ? false : true}
      // showCheckedStrategy={"SHOW_PARENT"}
      treeIcon={props.icon}
      filterTreeNode={true}
      treeNodeFilterProp={"filterTag"}
      // multiple={props.status ? false : true}
      maxTagCount={"responsive"}
      {...props}
    />
  );

  // return <TreeSelect treeData={dummyData} style={{ minWidth: 220 }} {...rest} />;
};

export default TreeSelectDemo;