<template>
  <div class="contenthidden">
    <StatusBar />
    <div class="contentscroll">
      <h2>{{ $t('falukant.church.title') }}</h2>
      <SimpleTabs v-model="activeTab" :tabs="tabs" />

      <div class="tab-content">
        <div v-if="activeTab === 'baptism'">
          <h3>{{ $t('falukant.church.baptism.title') }}</h3>
          <table>
            <thead>
              <tr>
                <th>{{ $t('falukant.church.baptism.table.gender') }}</th>
                <th>{{ $t('falukant.church.baptism.table.name') }}</th>
                <th>{{ $t('falukant.church.baptism.table.age') }}</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="person in baptismList" :key="person.id">
                <td>{{ $t(`falukant.church.baptism.gender.${person.gender}`) }}</td>
                <td>
                  <input type="text" v-model="person.proposedFirstName" />
                  <button @click="newName(person)">
                    {{ $t('falukant.church.baptism.table.newName') }}
                  </button>
                </td>
                <td>{{ person.age }}</td>
                <td>
                  <button @click="baptise(person)">
                    {{ $t('falukant.church.baptism.table.baptise') }}
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StatusBar from '@/components/falukant/StatusBar.vue'
import MessageDialog from '@/dialogues/standard/MessageDialog.vue'
import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue'
import apiClient from '@/utils/axios.js'
import SimpleTabs from '@/components/SimpleTabs.vue'

export default {
  name: 'ChurchView',
  components: {
    StatusBar,
    MessageDialog,
    ErrorDialog,
    SimpleTabs,
  },
  data() {
    return {
      activeTab: 'baptism',
      tabs: [
        { value: 'baptism', label: 'falukant.church.baptism.title' },
      ],
      baptismList: []
    }
  },
  async mounted() {
    await this.loadNotBaptisedChildren()
  },
  methods: {
    async loadNotBaptisedChildren() {
      try {
        const { data } = await apiClient.get('/api/falukant/family/notbaptised')
        this.baptismList = data
      } catch (err) {
        console.error(err)
      }
    },
    async newName(person) {
      try {
        const { data } = await apiClient.get(
          `/api/falukant/name/randomfirstname/${person.gender}`
        )
        person.proposedFirstName = data.name ?? data
      } catch (err) {
        console.error(err)
      }
    },
    async baptise(person) {
      try {
        await apiClient.post('/api/falukant/church/baptise', {
          characterId: person.id,
          firstName: person.proposedFirstName
        })
        this.loadNotBaptisedChildren();
        this.$root.$refs.messageDialog.open('tr:falukant.church.baptism.success')
      } catch (err) {
        console.error(err)
        this.$root.$refs.errorDialog.open('tr:falukant.church.baptism.error')
      }
    }
  }
}
</script>

<style scoped>
h2 {
  padding-top: 20px;
}

.simple-tabs {
  display: flex;
  margin-top: 1rem;
}

.simple-tab {
  padding: 0.5rem 1rem;
  background: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.simple-tab.active {
  background: #F9A22C;
  color: #000;
}

.tab-content {
  margin-top: 1rem;
}

input[type="text"] {
  width: 140px;
  margin-right: 0.5rem;
  box-sizing: border-box;
}

th {
  text-align: left;
}
</style>