import { connect } from "redux-bundler-react";
import {
  BasicToolbarButton,
  BasicToolbarMenu,
  BasicToolbarMenuItem,
  BasicToolbarMenuDivider,
  BasicToolbarSubmenu,
} from "../../application-controls";
import IdentifyBufferSection from "./identify-buffer-section";

const IdentifyButton = (props) => {
  const {
    doStartIdentify,
    doPauseIdentify,
    doStopIdentify,
    doSetDisplayAs,
    identifySelectBy,
    identifyDisplayAs,
  } = props;

  return (
    <BasicToolbarButton
      enabled={true}
      iconClass="ms ms-information"
      title="Identify"
      onDeactivate={doPauseIdentify}
    >
      <BasicToolbarMenu>
        <BasicToolbarMenuItem
          active={identifySelectBy === "point"}
          onClick={doStartIdentify}
          iconClass="ms ms-identify icon-inline"
          title="Identify by Point"
          text="Identify by Point"
          passProps={{ "data-selectby": "point" }}
        />
        <BasicToolbarMenuItem
          active={identifySelectBy === "polygon"}
          onClick={doStartIdentify}
          iconClass="ms ms-identify-box icon-inline"
          title="Identify by Polygon"
          text="Identify by Polygon"
          passProps={{ "data-selectby": "polygon" }}
        />
        {identifySelectBy ? <IdentifyBufferSection /> : null}
        <BasicToolbarMenuDivider />
        <BasicToolbarMenuItem
          active={false}
          onClick={doStopIdentify}
          iconClass="mdi mdi-close icon-inline"
          title="Clear All"
          text="Clear All"
        />
        <BasicToolbarMenuItem
          active={false}
          iconClass="mdi mdi-tune icon-inline"
          title="Display Format"
          text="Display Format"
        >
          <BasicToolbarSubmenu>
            <BasicToolbarMenuItem
              active={identifyDisplayAs === "popup"}
              onClick={doSetDisplayAs}
              iconClass="mdi mdi-message-outline icon-inline"
              title="Display as Popups"
              text="Display as Popups"
              passProps={{ "data-displayas": "popup" }}
            />
            <BasicToolbarMenuItem
              active={identifyDisplayAs === "sidebar"}
              onClick={doSetDisplayAs}
              iconClass="mdi mdi-format-list-bulleted icon-inline"
              title="Display in Sidebar List"
              text="Display in Sidebar List"
              passProps={{ "data-displayas": "sidebar" }}
            />
            <BasicToolbarMenuItem
              disabled={false}
              active={identifyDisplayAs === "table"}
              onClick={doSetDisplayAs}
              iconClass="ms ms-table icon-inline"
              title="Display in Attribute Table"
              text="Display in Attribute Table"
              passProps={{ "data-displayas": "table" }}
            />
          </BasicToolbarSubmenu>
        </BasicToolbarMenuItem>
      </BasicToolbarMenu>
    </BasicToolbarButton>
  );
};
export default connect(
  "doStartIdentify",
  "doPauseIdentify",
  "doStopIdentify",
  "doSetDisplayAs",
  "selectIdentifyDisplayAs",
  "selectIdentifySelectBy",
  IdentifyButton
);
