<template>
  <div>
    <div v-if="title" class="q-mb-sm text-subtitle1 text-weight-bold">
      {{ title }}
    </div>
    <div class="q-pa-md grey-border rounded-borders">
      <base-label-value v-if="weekWeekend" :loading="loading">
        <template #label>
          {{ $t('productionCalendar.weekWeekend') }}
        </template>
        <template #value>
          <q-select
            :readonly="edit ? tableReadOnly : readonly"
            v-model="selectedWeekWeekend"
            :options="weekDays"
            filled
            use-input
            use-chips
            input-debounce="0"
            multiple
            :label="
              readonly || tableReadOnly
                ? $t('productionCalendar.days')
                : $t('productionCalendar.select')
            "
            @input="weekHandler"
          />
        </template>
      </base-label-value>
      <base-label-value v-if="holidays" class="q-mt-sm" :loading="loading">
        <template #label>
          {{ $t('productionCalendar.holidays') }}
        </template>
        <template #value>
          <q-select
            :readonly="edit ? tableReadOnly : readonly"
            v-model="selectedHolidays"
            filled
            use-chips
            input-debounce="0"
            multiple
            :label="
              readonly || tableReadOnly
                ? $t('productionCalendar.days')
                : $t('productionCalendar.select')
            "
            hide-dropdown-icon
            @input="dateHandler($event, 'holidays')"
          >
            <template #append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy transition-show="scale" transition-hide="scale">
                  <q-date
                    :disable="edit ? tableReadOnly : readonly"
                    v-model="selectedHolidays"
                    multiple
                    minimal
                    :events="selectedHolidays"
                    event-color="primary"
                    @input="addDate('holidays')"
                  />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-select>
        </template>
      </base-label-value>
      <base-label-value v-if="workWeekend" class="q-mt-sm" :loading="loading">
        <template #label>
          {{ $t('productionCalendar.workWeekend') }}
        </template>
        <template #value>
          <q-select
            :readonly="edit ? tableReadOnly : readonly"
            v-model="selectedWorkWeekend"
            filled
            use-chips
            input-debounce="0"
            multiple
            :label="
              readonly || tableReadOnly
                ? $t('productionCalendar.days')
                : $t('productionCalendar.select')
            "
            hide-dropdown-icon
            @input="dateHandler($event, 'workWeekend')"
          >
            <template #append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy transition-show="scale" transition-hide="scale">
                  <q-date
                    :disable="edit ? tableReadOnly : readonly"
                    v-model="selectedWorkWeekend"
                    multiple
                    minimal
                    :events="selectedWorkWeekend"
                    event-color="primary"
                    @input="addDate('workWeekend')"
                  />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-select>
        </template>
      </base-label-value>
      <div class="q-mt-md">
        <q-btn
          class="q-mr-md"
          v-if="edit && !tableReadOnly"
          unelevated
          color="secondary"
          :label="$t('productionCalendar.back')"
          type="button"
          @click="cancelChange"
        />
        <q-btn
          class="q-mr-md"
          v-if="!readonly && tableReadOnly"
          unelevated
          color="primary"
          :label="
            calendar
              ? $t('productionCalendar.edit')
              : $t('productionCalendar.create')
          "
          type="button"
          @click="editTable"
        />
        <q-btn
          class="q-mr-md"
          v-if="edit && !tableReadOnly"
          :disable="isButtonDisabled"
          unelevated
          color="primary"
          :label="$t('productionCalendar.save')"
          type="button"
          @click="save"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>
