<template>
  <div class="dev-session">
    <input
      :value="dev"
      @input="setDev"
      @blur="check"
      type="text"
      :placeholder="placeholder"
    />
    <h2 v-show="isTurn">{{ session }}</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from '@vue/composition-api'
import { useGetters, useActions } from 'vuex-composition-helpers'
import { GetterTree } from 'vuex'
import { State, RootActions } from '@/store'

export default defineComponent({
  name: 'DevSession',
  props: {
    position: { type: String, required: true },
    isTurn: { type: Boolean, required: true },
    session: { type: String, required: true }
  },
  setup(props) {
    const { dev1, dev2 } = useGetters<GetterTree<State, State>>([
      'dev1',
      'dev2'
    ])
    const { setDev1, setDev2 } = useActions<RootActions>(['setDev1', 'setDev2'])

    const isDev1 = props.position === '1'

    const placeholder = ref(`dev ${props.position}`)

    const dev = computed(() => (isDev1 ? dev1.value : dev2.value))

    const setDev = (event: InputEvent) => {
      const name = (event.target as HTMLInputElement).value
      isDev1 ? setDev1(name) : setDev2(name)
    }

    const check = () => {
      if (!dev.value) {
        isDev1 ? setDev1(placeholder.value) : setDev2(placeholder.value)
      }
    }

    return {
      placeholder,
      dev,
      setDev,
      check
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/styles/variables';

.dev-session {
  h2 {
    font-size: 24pt;
  }

  input {
    margin: 0;
    border: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    background: none;
    line-height: 1;
    font-family: $serif-font-family;
    box-sizing: content-box;
    color: $color;
    text-align: center;
    font-size: 2.5rem;
    width: 100%;

    &:focus {
      outline: none;
    }
  }
}
</style>
