import { css } from '@emotion/css';
import React, { memo, useState } from 'react';
import '@hello-pangea/dnd';
import '@grafana/data';
import { useStyles2, Button, Select } from '@grafana/ui';
import { OperationInfoButton } from './OperationInfoButton.js';
import { FlexItem } from '../../QueryEditor/FlexItem.js';

const OperationHeader = memo(
  ({ operation, definition, index, onChange, onRemove, onToggle, queryModeller, dragHandleProps }) => {
    var _a;
    const styles = useStyles2(getStyles);
    const [state, setState] = useState({});
    const onToggleSwitcher = () => {
      if (state.isOpen) {
        setState({ ...state, isOpen: false });
      } else {
        const alternatives = queryModeller.getAlternativeOperations(definition.alternativesKey).map((alt) => ({ label: alt.name, value: alt }));
        setState({ isOpen: true, alternatives });
      }
    };
    return /* @__PURE__ */ React.createElement("div", { className: styles.header }, !state.isOpen && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ...dragHandleProps }, (_a = definition.name) != null ? _a : definition.id), /* @__PURE__ */ React.createElement(FlexItem, { grow: 1 }), /* @__PURE__ */ React.createElement("div", { className: `${styles.operationHeaderButtons} operation-header-show-on-hover` }, /* @__PURE__ */ React.createElement(
      Button,
      {
        icon: "angle-down",
        size: "sm",
        onClick: onToggleSwitcher,
        fill: "text",
        variant: "secondary",
        title: "Click to view alternative operations"
      }
    ), /* @__PURE__ */ React.createElement(
      OperationInfoButton,
      {
        definition,
        operation,
        innerQueryPlaceholder: queryModeller.innerQueryPlaceholder
      }
    ), definition.toggleable && /* @__PURE__ */ React.createElement(
      Button,
      {
        icon: operation.disabled ? "eye-slash" : "eye",
        size: "sm",
        onClick: () => onToggle(index),
        fill: "text",
        variant: "secondary",
        title: operation.disabled ? "Enable operation" : "Disable operation"
      }
    ), /* @__PURE__ */ React.createElement(
      Button,
      {
        icon: "times",
        size: "sm",
        onClick: () => onRemove(index),
        fill: "text",
        variant: "secondary",
        title: "Remove operation"
      }
    ))), state.isOpen && /* @__PURE__ */ React.createElement("div", { className: styles.selectWrapper }, /* @__PURE__ */ React.createElement(
      Select,
      {
        autoFocus: true,
        openMenuOnFocus: true,
        placeholder: "Replace with",
        options: state.alternatives,
        isOpen: true,
        onCloseMenu: onToggleSwitcher,
        onChange: (value) => {
          if (value.value) {
            const newDef = queryModeller.getOperationDefinition(value.value.id);
            const newParams = [...newDef.defaultParams];
            for (let i = 0; i < Math.min(operation.params.length, newParams.length); i++) {
              if (newDef.params[i].type === definition.params[i].type) {
                newParams[i] = operation.params[i];
              }
            }
            const changedOp = { ...operation, params: newParams, id: value.value.id };
            onChange(
              index,
              definition.changeTypeHandler ? definition.changeTypeHandler(changedOp, newDef) : changedOp
            );
          }
        }
      }
    )));
  }
);
OperationHeader.displayName = "OperationHeader";
const getStyles = (theme) => {
  return {
    header: css({
      borderBottom: `1px solid ${theme.colors.border.medium}`,
      padding: theme.spacing(0.5, 0.5, 0.5, 1),
      display: "flex",
      alignItems: "center"
    }),
    operationHeaderButtons: css({
      opacity: 1
    }),
    selectWrapper: css({
      paddingRight: theme.spacing(2)
    })
  };
};

export { OperationHeader };
//# sourceMappingURL=OperationHeader.js.map
