import React from "react";
import MultiLevelSelect from "../_multi_level_select";

const treeData = [
  {
    label: "Philadelphia",
    value: "Philadelphia",
    id: "phl",
    children: [
      {
        label: "HQ",
        value: "HQ",
        id: "hq",
      },
      {
        label: "Marketing & Sales PHL",
        value: "Marketing & Sales PHL",
        id: "marketing1",
      },
      {
        label: "Installation Office PHL",
        value: "Installation Office PHL",
        id: "installation1",
      },
      {
        label: "Warehouse PHL",
        value: "Warehouse PHL",
        id: "warehouse1",
      },
    ]
  },
  {
    label: "New Jersey",
    value: "New Jersey",
    id: "nj",
    children: [
      {
        label: "New Jersey",
        value: "New Jersey",
        id: "nj1",
        children: [
          {
            label: "Marketing & Sales NJ",
            value: "Marketing & Sales NJ",
            id: "marketing2",
          },
          {
            label: "Installation Office NJ",
            value: "Installation Office NJ",
            id: "installation2",
          },
          {
            label: "Warehouse NJ",
            value: "Warehouse NJ",
            id: "warehouse2",
          },
        ],
      },
      {
        label: "Princeton",
        value: "Princeton",
        id: "princeton",
        children: [
          {
            label: "Marketing & Sales Princeton",
            value: "Marketing & Sales Princeton",
            id: "marketing3",
          },
          {
            label: "Installation Office Princeton",
            value: "Installation Office Princeton",
            id: "installation3",
          },
          {
            label: "Warehouse Princeton",
            value: "Warehouse Princeton",
            id: "warehouse3",
          },
        ]
      },
    ]
  },
  {
    label: "Maryland",
    value: "Maryland",
    id: "MD",
    children: [
      {
        label: "Marketing & Sales MD",
        value: "Marketing & Sales MD",
        id: "marketing4",
      },
      {
        label: "Installation Office MD",
        value: "Installation Office MD",
        id: "installation4",
      },
      {
        label: "Warehouse MD",
        value: "Warehouse MD",
        id: "warehouse4",
      },
    ]
  },
  {
    label: "Connecticut",
    value: "Connecticut",
    id: "CT",
    children: [
      {
        label: "Marketing & Sales CT",
        value: "Marketing & Sales CT",
        id: "marketing5",
      },
      {
        label: "Installation Office CT",
        value: "Installation Office CT",
        id: "installation5",
      },
      {
        label: "Warehouse CT",
        value: "Warehouse CT",
        id: "warehouse5",
      },
    ]
  },
];

const MultiLevelSelectSingle = (props) => {
  return (
    <div>
      <MultiLevelSelect
          id="multiselect-single"
          inputName="Power"
          onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
          treeData={treeData}
          variant="single"
          {...props}
      />
    </div>
  )
};

export default MultiLevelSelectSingle;