import React from 'react';
import { of } from 'rxjs';
import { useStyles2, Switch } from '@grafana/ui';
import { css } from '@emotion/css';
import { SceneObjectBase } from '../../core/SceneObjectBase.js';
import { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig.js';
import { SceneVariableValueChangedEvent } from '../types.js';
import { getVariableControlId } from '../utils.js';

class SwitchVariable extends SceneObjectBase {
  constructor(initialState) {
    super({
      // TODO: remove this once switch is in the schema @leventebalogh
      // @ts-expect-error - switch is a valid variable type, but not in the schema yet
      type: "switch",
      value: "false",
      enabledValue: "true",
      disabledValue: "false",
      name: "",
      ...initialState
    });
    this._prevValue = "";
    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => this.getKeys() });
  }
  /**
   * This function is called on when SceneVariableSet is activated or when a dependency changes.
   */
  validateAndUpdate() {
    const newValue = this.getValue();
    if (this._prevValue !== newValue) {
      this._prevValue = newValue;
      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
    }
    return of({});
  }
  setValue(newValue) {
    if (this.getValue() === newValue) {
      return;
    }
    if ([this.state.enabledValue, this.state.disabledValue].includes(newValue)) {
      this.setState({ value: newValue });
      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
    } else {
      console.error(
        `Invalid value for switch variable: "${newValue}". Valid values are: "${this.state.enabledValue}" and "${this.state.disabledValue}".`
      );
    }
  }
  getValue() {
    return this.state.value;
  }
  isEnabled() {
    return this.state.value === this.state.enabledValue;
  }
  isDisabled() {
    return this.state.value === this.state.disabledValue;
  }
  getKey() {
    return `var-${this.state.name}`;
  }
  getKeys() {
    if (this.state.skipUrlSync) {
      return [];
    }
    return [this.getKey()];
  }
  getUrlState() {
    if (this.state.skipUrlSync) {
      return {};
    }
    return { [this.getKey()]: this.state.value };
  }
  updateFromUrl(values) {
    const val = values[this.getKey()];
    if (typeof val === "string") {
      this.setValue(val);
    }
  }
}
SwitchVariable.Component = SwitchVariableRenderer;
function SwitchVariableRenderer({ model }) {
  const state = model.useState();
  const styles = useStyles2(getStyles$7);
  return /* @__PURE__ */ React.createElement("div", { className: styles.container }, /* @__PURE__ */ React.createElement(
    Switch,
    {
      id: getVariableControlId(model.state.type, state.key),
      value: state.value === state.enabledValue,
      onChange: (event) => {
        model.setValue(event.currentTarget.checked ? state.enabledValue : state.disabledValue);
      }
    }
  ));
}
function getStyles$7(theme) {
  return {
    container: css({
      display: "flex",
      alignItems: "center",
      padding: theme.spacing(0, 1),
      height: theme.spacing(theme.components.height.md),
      borderRadius: theme.shape.radius.default,
      border: `1px solid ${theme.components.input.borderColor}`,
      background: theme.colors.background.primary
    })
  };
}

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