<template>
  <q-card flat class="full-width q-pa-none">
    <q-card-section class="full-width">
      <div class="row items-center">
        <div class="col">
          <div class="text-h6">{{ t('PRO') }}</div>
        </div>
        <div class="col-auto">
          <q-btn flat :label="t('button.prev')" @click="emitPrev" class="q-mr-sm" />
          <q-btn color="primary" :label="t('button.next')" @click="saveAndNext" />
        </div>
      </div>
      <q-separator class="q-my-sm" />

      <q-form ref="formRef" class="q-gutter-md q-mt-md">
        <div class="row items-center">
          <div class="col">
            <q-toggle v-model="form.expensesChanged" :label="t('professionalExpenses.expensesChanged')" />
          </div>
        </div>

        <div v-if="form.expensesChanged" class="q-mt-md">
            <q-input
              v-model="form.workplaceDescription"
              :label="t('professionalExpenses.workplaceDescription')"
              type="text"
              outlined
            />
            <div class="row">
              <div class="col-6  q-pr-md">
            <q-select
              v-model="form.commuteMethod"
              :options="commuteMethodOptions"
              :label="t('professionalExpenses.commuteMethod')"
              emit-value
              map-options
              outlined
              class="q-mt-md"
            />
            </div>
             <div class="col-6">
            <q-input
              v-model.number="form.commuteKm"
              :label="t('professionalExpenses.commuteKm')"
              type="number"
              outlined
              class="q-mt-md"
            />
            </div>
            </div>
            <div class="column">
            <q-toggle
              v-model="form.lunchAtHome"
              :label="t('professionalExpenses.lunchAtHome')"
              class="q-mt-md"
            />
            <q-toggle
              v-model="form.eatsOut"
              :label="t('professionalExpenses.eatsOut')"
              class="q-mt-md"
            />
            <q-toggle
              v-if="form.eatsOut"
              v-model="form.hasCanteenOrVouchers"
              :label="t('professionalExpenses.hasCanteenOrVouchers')"
              class="q-mt-md"
            />
            </div>
        </div>


      </q-form>


    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick, watch, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import type { StepDescriptor } from '../../types/types'
import { useProfessionalExpensesStore, type ProfessionalExpensesData } from '../../stores/professionalExpenses'

type CommuteMethod = 'CAR' | 'BUS' | 'BIKE' | 'WALK'

type ProfessionalExpensesForm = {
  expensesChanged: boolean
  workplaceDescription: string
  commuteMethod: CommuteMethod | null
  commuteKm: number | null
  lunchAtHome: boolean
  eatsOut: boolean
  hasCanteenOrVouchers: boolean
}

const store = useProfessionalExpensesStore()

const props = defineProps<{ step?: StepDescriptor }>()
const emit = defineEmits(['next', 'prev'])

const { t } = useI18n()

// QForm ref
const formRef = ref<{ validate?: () => Promise<boolean> | boolean; resetValidation?: () => void } | null>(null)

/* const required = (msg?: string) => (v: unknown) => {
  const message = msg || requiredMessage()
  if (v === null || v === undefined) return message
  if (typeof v === 'string') return (v.trim() !== '') || message
  if (Array.isArray(v)) return v.length > 0 || message
  return true
}

const minLength = (n: number, msg?: string) => (v: unknown) => {
  const message = msg || `${t('validation.minLength') || `Minimum ${n} chars`}`
  if (v === null || v === undefined) return true
  if (typeof v === 'string') return (v.trim().length >= n) || message
  return true
} */



const form = store.data as ProfessionalExpensesForm

const commuteMethodOptions = computed<Array<{ label: string; value: CommuteMethod }>>(() => [
  { label: t('professionalExpenses.commuteMethodOptions.car'), value: 'CAR' },
  { label: t('professionalExpenses.commuteMethodOptions.bus'), value: 'BUS' },
  { label: t('professionalExpenses.commuteMethodOptions.bike'), value: 'BIKE' },
  { label: t('professionalExpenses.commuteMethodOptions.walk'), value: 'WALK' }
])

/* const professionalExpensesSchema = {
  fields: [
    { key: "expensesChanged", type: "boolean", required: true },
    { key: "workplaceDescription", type: "string" },
    { key: "commuteMethod", type: "enum", values: ["CAR", "BUS", "BIKE", "WALK"] },
    { key: "commuteKm", type: "number" },
    { key: "lunchAtHome", type: "boolean" },
    { key: "eatsOut", type: "boolean" },
    { key: "hasCanteenOrVouchers", type: "boolean", requiredIf: { eatsOut: true } },
  ],
} as const;
 */

onMounted(async () => {
  await nextTick()
  formRef.value?.resetValidation?.()
})

watch(
  () => form,
  () => {
    store.persist()
  },
  { deep: true }
)

watch(() => form.eatsOut, (value) => {
  if (!value) form.hasCanteenOrVouchers = false
})




async function saveAndNext() {
  try {
    const ok = await (formRef.value?.validate?.() ?? true)
    if (ok === false) return
  } catch {
    return
  }
  store.setProfessionalExpenses(form as ProfessionalExpensesData)
  emit('next', props.step?.next)
}

function emitPrev() {
  store.setProfessionalExpenses(form as ProfessionalExpensesData)
  emit('prev', props.step?.prev)
}

//defineExpose({ buildPayload })
</script>

<style scoped>
.full-width { width: 100%; }
.contained-card { min-width: 480px; max-width: 720px; }
.contained-card .q-card-section { padding: 16px; }
.contained-card .q-card-actions { padding: 12px 16px; }
.child-modal { min-width: 480px; }
</style>
