enum VisibleButton {
  LEFT,
  RIGHT,
}

interface State {
  visibleButton: VisibleButton;
}

class ButtonsContainer extends React.PureComponent<{}, State> {

  public state: State = {
    visibleButton: VisibleButton.LEFT,
  };

  public updateVisibleButton = () => {
    const newVisibleButton = this.state.visibleButton === VisibleButton.LEFT
      ? VisibleButton.RIGHT
      : VisibleButton.LEFT;
    this.setState({ visibleButton: newVisibleButton });
  }

  public render() {
    return (
      <Container>
        <Button
          data-testid="switchButton"
          onClick={this.updateVisibleButton}
          type={ButtonType.DEFAULT}
        >
          Switch visible Value
        </Button>

        <ButtonsWrapper>
          <div style={{ flex: 1 }}>
            {this.state.visibleButton === VisibleButton.LEFT &&
              <Button data-testid="leftButton" type={ButtonType.PRIMARY}>
                Left visible!
              </Button>
            }
          </div>

          <div style={{ flex: 1 }}>
            {this.state.visibleButton === VisibleButton.RIGHT &&
              <Button data-testid="rightButton" type={ButtonType.DANGER}>
                Right visible!
              </Button>
            }
          </div>
        </ButtonsWrapper>
      </Container>
    );
  }
}