<template>
  <div class="dev-session">
    <h1 contenteditable @input="({ target }) => setDev(target.innerText)">
      {{ dev || `dev ${position}` }}
    </h1>
    <h2 v-show="isTurn">{{ session }}</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent } 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 dev = isDev1 ? dev1 : dev2

    const setDev = (name: string) => {
      const newName = (name ?? '').replace(/(\r\n|\n|\r)/gm, '').trim()
      isDev1 ? setDev1(newName) : setDev2(newName)
    }

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

<style lang="scss" scoped>
.dev-session {
  h2 {
    font-size: 24pt;
  }
}
</style>
