const classNames = require('classnames');
const PropTypes = require('prop-types');
const React = require('react');
const OauthContext = require('./contexts/Oauth');
const SelectedAppContext = require('./contexts/SelectedApp');
const VariablesContext = require('./contexts/Variables');
class Variable extends React.Component {
constructor(props) {
super(props);
this.state = { showDropdown: false };
this.getName = this.getName.bind(this);
this.toggleVarDropdown = this.toggleVarDropdown.bind(this);
this.toggleAuthDropdown = this.toggleAuthDropdown.bind(this);
this.renderVarDropdown = this.renderVarDropdown.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange(event) {
this.toggleVarDropdown();
this.props.changeSelected(event.target.value);
}
getName() {
const name = this.props.name || this.props.variable;
if (!name) throw new TypeError("Missing prop 'name' or 'variable' for Variable component!");
return name;
}
getDefault() {
const def = this.props.defaults.filter(Boolean).find(d => d.name === this.getName()) || {};
if (def.default) return def.default;
return this.getName().toUpperCase();
}
getSelectedValue(selected) {
const { user } = this.props;
let selectedValue = {};
if (Array.isArray(user.keys) && user.keys.length) {
selectedValue = selected ? user.keys.find(key => key.name === selected) : user.keys[0];
}
return selectedValue;
}
// Determining whether to show a dropdown or not onClick
// based upon whether the currently displayed value has come
// from one of the nested user.keys[] or not.
// Additionally do not show the dropdown if there is only a
// single key, since there's nothing to change it to.
shouldShowVarDropdown(selected) {
const { user } = this.props;
return !!this.getSelectedValue(selected)[this.getName()] && Array.isArray(user.keys) && user.keys.length > 1;
}
// Return value in this order
// - selected user keys value (or first user keys)
// - top level user value
// - default value
// - uppercase key
getValue(selected) {
const selectedValue = this.getSelectedValue(selected);
const value = selectedValue[this.getName()] || this.props.user[this.getName()] || this.getDefault();
return typeof value === 'object' ? JSON.stringify(value) : value;
}
toggleVarDropdown() {
if (!this.shouldShowVarDropdown()) return;
this.setState(prevState => ({ showDropdown: !prevState.showDropdown }));
}
toggleAuthDropdown() {
this.setState(prevState => ({ showAuthDropdown: !prevState.showAuthDropdown }));
}
static renderAuthDropdown() {
return (