import * as React from "react";
import { Component } from "react";
import styled from "react-emotion";
import { NestedInputTags } from "../lib";
import { Option } from "$lib-core-types/Option.types";
import { options as co } from "./CustomBody";

const options: Option[] = [
  {
    id: "Management Zone",
    label: "Management Zone",
    tagLabel: () => <span>[MZ]</span>,
    categoryPreview: ["Region", "Country"],
    allowAny: true,
    subOptions: [
      {
        id: "Asia",
        label: "Asia",
        category: "Region",
        subOptions: [
          {
            id: "China",
            label: "China",
            category: "Country"
          },
          {
            id: "Korea",
            label: "Korea",
            category: "Country"
          }
        ]
      },
      {
        id: "Europe",
        label: "Europe",
        category: "Region",
        allowAny: true,
        subOptions: [
          {
            id: "Croatia",
            label: "Croatia",
            category: "Country"
          },
          {
            id: "Poland",
            label: "Poland",
            category: "Country"
          },
          {
            id: "France",
            label: "France",
            category: "Country"
          }
        ]
      },
      {
        id: "North America",
        label: "North America",
        category: "Region",
        allowAny: true,
        subOptions: [
          {
            id: "USA",
            label: "USA",
            category: "Country"
          },
          {
            id: "Canada",
            label: "Canada",
            category: "Country"
          }
        ]
      }
    ]
  },

  {
    id: "Names",
    label: "Names",
    subOptions: [
      {
        id: "Male",
        label: "Male",
        allowAny: true,
        subOptions: [
          {
            id: "Adam",
            label: "Adam"
          },
          {
            id: "Norman",
            label: "Norman"
          },
          {
            id: "Joseph",
            label: "Joseph"
          },
          {
            id: "Steven",
            label: "Steven"
          },
          {
            id: "Andrew",
            label: "Andrew"
          },
          {
            id: "Thomas",
            label: "Thomas"
          },
          {
            id: "Markus",
            label: "Markus"
          }
        ]
      },
      {
        id: "Female",
        label: "Female",
        allowAny: true,
        subOptions: [
          {
            id: "Anna",
            label: "Anna"
          },
          {
            id: "Monica",
            label: "Monica"
          }
        ]
      }
    ]
  },
  {
    id: "Other filters",
    label: "Other filters",
    subOptions: [
      {
        id: "Client type",
        label: "Client type"
      },
      {
        id: "Client Segment",
        label: "Client Segment"
      },
      {
        id: "Complex filters",
        label: "Complex filters",
        subOptions: [
          {
            id: "Nested",
            label: "Nested",
            subOptions: [
              {
                id: "Nested children",
                label: "Nested children"
              }
            ]
          }
        ]
      }
    ]
  }
];

// const initialValues = [
//   {
//     option: {
//       id: "suivre les dossiers",
//       label: "Suivre les dossiers",
//       category: "Sub sub thematic"
//     },
//     parents: [
//       "thematics",
//       "le personnel",
//       "compétences / expertise / confiance"
//     ]
//   },
//   {
//     option: { id: "GP COEUR DU GP", label: "Gp coeur du gp" },
//     parents: ["Other filters", "segmentation"]
//   }
// ];

const options2: Option[] = [
  {
    id: "Client type",
    label: "Client type"
  },
  {
    id: "Client Segment",
    label: "Client Segment"
  }
];

const Bar = styled("div")`
  border: 1px solid black;
  height: 50px;
`;

const StyledNestedInputTags = styled(NestedInputTags)`
  width: 400px;
`;

export class App extends Component {
  state = {
    options: options
  };

  toggle = () => {
    this.setState({ options: options2 });
  };

  render() {
    return (
      <div>
        <StyledNestedInputTags
          isFlat
          initialValues={[
            {
              option: {
                id: "Client type",
                label: "Client type"
              },
              parents: [] as string[]
            }
          ]}
          categoryPrefix="test"
          options={options2}
          onRemoved={options => {
            console.log({ options });
          }}
          onSelected={(...args: any[]) => {
            console.log("on select", ...args);
          }}
        />
        <Bar>Custom content 2</Bar>
        <StyledNestedInputTags
          options={co}
          onRemoved={options => {
            console.log({ options });
          }}
          onSelected={(...args: any[]) => {
            console.log("on select", ...args);
          }}
        />
      </div>
    );
  }
}