<template>
  <LayoutContainer>
    <UiLoadingPanel v-if="pending" />
    <UiForm
      v-else-if="parameters !== null"
      :model="Parameters"
      :entity="parameters"
      action-position="bottom"
    >
      <v-row>
        <v-col cols="12">
          <UiInputDatePicker
            v-if="organizationProfile.isSchool"
            v-model="parameters.financialDate"
            field="financialDate"
            label="start_date_of_financial_season"
            position="left"
            class="my-2"
          />

          <UiInputDatePicker
            v-if="organizationProfile.isSchool"
            v-model="parameters.startCourseDate"
            field="startCourseDate"
            label="start_date_of_courses"
            position="left"
            class="my-2"
          />

          <UiInputCheckbox
            v-model="parameters.showAdherentList"
            field="showAdherentList"
            label="show_adherents_list_and_their_coordinates"
          />

          <UiInputAutocompleteWithEnum
            v-model="parameters.timezone"
            enum-name="timezone"
            field="timezone"
            variant="underlined"
          />

          <UiInputDatePicker
            v-if="organizationProfile.isSchool"
            v-model="parameters.musicalDate"
            field="musicalDate"
            label="start_date_of_activity_season"
            position="left"
            class="my-2"
          />

          <UiInputDatePicker
            v-if="organizationProfile.isSchool"
            v-model="parameters.endCourseDate"
            field="endCourseDate"
            label="end_date_of_courses"
            position="left"
            class="my-2"
          />

          <UiInputCheckbox
            v-if="
              organizationProfile.isSchool && organizationProfile.isAssociation
            "
            v-model="parameters.studentsAreAdherents"
            field="studentsAreAdherents"
            label="students_are_also_association_members"
          />

          <div
            v-if="organizationProfile.isCMFCentralService"
            class="d-flex flex-column"
          >
            <span class="mb-1 v-label" style="font-size: 12px"
              >{{ $t('qrCode') }}
            </span>
            <UiInputImage
              v-model="parameters.qrCode"
              field="qrCode"
              label="licenceQrCode"
              :width="120"
            />
          </div>
        </v-col>
      </v-row>
    </UiForm>
  </LayoutContainer>
</template>

<script setup lang="ts">
import Parameters from '~/models/Organization/Parameters'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'

definePageMeta({
  name: 'parameters_general_page',
})

const { fetch } = useEntityFetch()

const organizationProfile = useOrganizationProfileStore()

if (organizationProfile.parametersId === null) {
  throw new Error('Missing organization parameters id')
}

const { data: parameters, pending } = fetch(
  Parameters,
  organizationProfile.parametersId,
)
</script>

<style scoped lang="scss"></style>
