<template>
  <div class="row">
    <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
      <div class="form-group">
        <input
          type="text"
          placeholder="Username"
          autocomplete="off"
          class="form-control"
          v-model="username"
          :disabled="lockUsername"
          @keydown.enter="connect()"
        />
        <button
          class="btn btn-primary form-control"
          @click.prevent="connect"
          :disabled="connectButton.disabled"
        >
          {{ connectButton.text }}
        </button>
        <p>
          {{ connectionStatus }}
        </p>
        <button
          class="btn btn-primary form-control"
          :disabled="onlineButtonDisable || isOneGameRunning"
          @click.prevent="$emit('enter-online', username)"
        >
          Online Game
        </button>
        <button
          class="btn btn-primary form-control"
          @click.prevent="$emit('enter-local')"
          :disabled="isOneGameRunning"
        >
          Local Game
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { socketService } from '../../main';
import { globalEventsBus } from '../../main';
function initialState() {
  return {
    connectButton: {
      text: 'Connect',
      disabled: false
    },
    connectionStatus: 'Not Connected',
    username: '',
    isConnected: false,
    lockUsername: false,
    onlineButtonDisable: true,
    isOneGameRunning: false
  };
}

export default {
  data() {
    return initialState();
  },
  methods: {
    connect() {
      if (!this.isConnected) {
        if (this.username === '') {
          this.connectionStatus = 'Enter a username';
        } else {
          this.connectButton.disabled = true;
          this.connectButton.text = 'Connecting...';
          this.lockUsername = true;
          socketService
            .connect(this.username)
            .then(() => {
              this.isConnected = true;
              this.connectButton.text = 'Disconnect';
              this.connectButton.disabled = false;
              this.onlineButtonDisable = false;
              this.connectionStatus = 'Connected as ' + this.username;
            })
            .catch(err => {
              let user = this.username;
              Object.assign(this.$data, initialState());
              this.connectionStatus =
                'Could not connect as ' + user + ' (' + err + ')';
            });
        }
      } else {
        socketService.disconnect();
        Object.assign(this.$data, initialState());
      }
    }
  },
  computed: {},
  created() {
    globalEventsBus.$on('game-running', () => {
      this.connectionStatus =
        'Connected as ' + this.username + ' (Game running)';
      this.isOneGameRunning = true;
    });
    globalEventsBus.$on('game-stopped', () => {
      this.connectionStatus = 'Connected as ' + this.username;
      this.isOneGameRunning = false;
    });
  }
};
</script>
<style lang="scss" scoped>
// @import '../style/style.scss';
</style>
