<script setup lang="ts">
import DataTable from '@/components/DataTable.vue'

const dob = new Date('1987-12-08')
const locale = 'en-US'
const dateFormat = new Intl.DateTimeFormat(locale, {
  year: 'numeric',
  month: 'long',
  day: '2-digit'
})

const height = 227
const weight = 175

const toImperial = (cm: number): string => {
  const realFeet = (cm * 0.3937) / 12
  const feet = Math.floor(realFeet)
  const inches = Math.round((realFeet - feet) * 12)

  return `${feet}'${inches}"`
}

const toInch = (cm: number): string => {
  return `${Math.round(cm / 2.45)} in`
}

const toLbs = (kg: number): number => {
  const nearExact = kg / 0.45359237
  const lbs = Math.floor(nearExact)

  return lbs
}

const heads = ['data.general.heading[0]', 'data.general.heading[1]']
const data = [
  ['data.general.fullName[0]', 'data.general.fullName[1]'],
  ['data.general.dob[0]', dateFormat.format(dob)],
  ['data.general.gender[0]', 'data.general.gender[1]'],
  ['data.general.height[0]', `${height} cm (${toImperial(height)})`],
  ['data.general.weight[0]', `${weight} kg (${toLbs(weight)} lbs)`]
]

const sexHeads = ['data.sexuality.heading[0]', 'data.sexuality.heading[1]']
const sexData = [
  ['data.sexuality.identifiesAs[0]', 'data.sexuality.identifiesAs[1]'],
  ['data.sexuality.preferredRole[0]', 'data.sexuality.preferredRole[1]']
]
</script>

<template>
  <article>
    <section>
      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
    </section>

    <DataTable :headings="heads" :data="data"></DataTable>

    <section>
      <h2>{{ $t('general.personality.heading') }}</h2>
      <p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p>
    </section>

    <section>
      <h2>{{ $t('general.sexuality.heading') }}</h2>
    </section>

    <DataTable :headings="sexHeads" :data="sexData"></DataTable>

    <section>
      <p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
    </section>
  </article>
</template>
