import { Dropdown } from "semantic-ui-react";
import React, { Component } from "react";

export default class FilterDevices extends Component {
  render() {
    const tagOptions = [
      {
        key: "regularLight",
        text: "regularLight",
        value: "regularLight",
        label: { color: "red", empty: true, circular: true },
      },
      {
        key: "dimmableLight",
        text: "dimmableLight",
        value: "dimmableLight",
        label: { color: "blue", empty: true, circular: true },
      },
      {
        key: "buttonDimmer",
        text: "buttonDimmer",
        value: "buttonDimmer",
        label: { color: "black", empty: true, circular: true },
      },
      {
        key: "knobDimmer",
        text: "knobDimmer",
        value: "knobDimmer",
        label: { color: "purple", empty: true, circular: true },
      },
      {
        key: "motionSensor",
        text: "motionSensor",
        value: "motionSensor",
        label: { color: "orange", empty: true, circular: true },
      },
      {
        key: "sensor",
        text: "sensor",
        value: "sensor",
        label: { empty: true, circular: true },
      },
      {
        key: "smartPlug",
        text: "smartPlug",
        value: "smartPlug",
        label: { color: "pink", empty: true, circular: true },
      },
      {
        key: "switch",
        text: "switch",
        value: "switch",
        label: { color: "green", empty: true, circular: true },
      },
    ];

    return (
      <Dropdown
        text="Filter Devices"
        icon="filter"
        floating
        labeled
        button
        className="icon"
      >
        <Dropdown.Menu>
          <Dropdown.Divider />
          <Dropdown.Header icon="tags" content="Tag Device" />
          <Dropdown.Menu scrolling>
            {tagOptions.map((option) => (
              <Dropdown.Item
                key={option.value}
                {...option}
                onClick={this.props.filterDevices}
              />
            ))}
          </Dropdown.Menu>
        </Dropdown.Menu>
      </Dropdown>
    );
  }
}