text: import React, { Component } from "react";
  import PropTypes from "prop-types";
  
  import { action } from "mobx";
  import { observer } from "mobx-react";
  
  import Select from "react-select";
  
  import { Settings } from "Stores/Settings";
  import { ReactSelectStyles } from "Components/MultiSelect";
  
  const AlertGroupCollapseConfiguration = observer(
    class AlertGroupCollapseConfiguration extends Component {
      static propTypes = {
        settingsStore: PropTypes.instanceOf(Settings).isRequired
      };
  
      constructor(props) {
        super(props);
  
        this.validateConfig();
      }
  
      valueToOption = val => {
        const { settingsStore } = this.props;
  
        return {
          label: settingsStore.alertGroupConfig.options[val].label,
          value: val
        };
      };
  
      validateConfig = action(() => {
        const { settingsStore } = this.props;
  
        if (
          !Object.values(settingsStore.alertGroupConfig.options)
            .map(o => o.value)
            .includes(settingsStore.alertGroupConfig.config.defaultCollapseState)
        ) {
          settingsStore.alertGroupConfig.config.defaultCollapseState =
            settingsStore.alertGroupConfig.options.collapsedOnMobile.value;
        }
      });
  
      onCollapseChange = action((newValue, actionMeta) => {
        const { settingsStore } = this.props;
  
        settingsStore.alertGroupConfig.config.defaultCollapseState =
          newValue.value;
      });
  
      render() {
        const { settingsStore } = this.props;
  
        return (
          <div className="form-group">
            <div className="text-center">
              <label className="mb-4 font-weight-bold">
                Default alert group display
              </label>
            </div>
            <Select
              styles={ReactSelectStyles}
              classNamePrefix="react-select"
              instanceId="configuration-collapse"
              defaultValue={this.valueToOption(
                settingsStore.alertGroupConfig.config.defaultCollapseState
              )}
              options={Object.values(settingsStore.alertGroupConfig.options)}
              onChange={this.onCollapseChange}
              hideSelectedOptions
            />
          </div>
        );
      }
    }
  );
  
  export { AlertGroupCollapseConfiguration };
  