<template>
  <q-card-section class="fit row justify-start content-center items-center">
    <q-card-section class="fit row justify-start content-center items-center">
      <IsoDateInput
        v-model="job.start"
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Beginn"
        type="datetime"
        :rules="[notEmpty, noValidDate]"
      />
      <IsoDateInput
        v-model="job.end"
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Ende"
        type="datetime"
        :rules="[notEmpty, noValidDate, isAfterDate]"
      />
    </q-card-section>
    <q-card-section class="row fit justify-start content-center items-center">
      <q-select
        v-model="job.type"
        filled
        use-input
        label="Dienstart"
        input-debounce="0"
        class="col-xs-12 col-sm-6 q-pa-sm"
        :options="jobtypes"
        option-label="name"
        option-value="id"
        map-options
        clearable
        :rules="[notEmpty]"
      />
      <q-input
        v-model="job.required_services"
        filled
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Dienstanzahl"
        type="number"
        :rules="[notEmpty]"
      />
    </q-card-section>
    <q-card-section class="fit row justify-start content-center items-center">
      <q-input
        v-model="job.comment"
        class="col-xs-12 col-sm-6 q-pa-sm"
        label="Beschreibung"
        type="textarea"
        filled
        :rules="[notEmpty]"
      />
    </q-card-section>
    <q-btn label="Schicht löschen" color="negative" :disabled="jobCanDelete" @click="removeJob" />
  </q-card-section>
</template>

<script lang="ts">
import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
import { defineComponent, computed, onBeforeMount, PropType } from 'vue';
import { useScheduleStore } from '../../store';
import { date } from 'quasar';

export default defineComponent({
  name: 'Job',
  components: { IsoDateInput },
  props: {
    modelValue: {
      required: true,
      type: Object as PropType<FG.Job>,
    },
    jobCanDelete: Boolean,
  },
  emits: {
    'remove-job': () => true,
    'update:modelValue': (job: FG.Job) => !!job,
  },
  setup(props, { emit }) {
    const store = useScheduleStore();

    onBeforeMount(() => store.getJobTypes());

    const jobtypes = computed(() => store.jobTypes);

    const job = new Proxy(props.modelValue, {
      get(target, prop) {
        if (typeof prop === 'string') {
          return ((props.modelValue as unknown) as Record<string, unknown>)[prop];
        }
      },
      set(obj, prop, value) {
        console.log('...', obj, prop, value);
        if (typeof prop === 'string') {
          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
          emit('update:modelValue', Object.assign({}, props.modelValue, { [prop]: value }));
        }
        return true;
      },
    });

    function removeJob() {
      emit('remove-job');
    }

    function notEmpty(val: string) {
      return !!val || 'Feld darf nicht leer sein!';
    }
    function noValidDate(val: string) {
      return !!date.isValid(val) || 'Datum/Zeit muss gesetzt sein!';
    }

    function isAfterDate(val: string) {
      return props.modelValue.start < new Date(val) || 'Ende muss hinter dem Start liegen';
    }

    return {
      job,
      jobtypes,
      removeJob,
      notEmpty,
      noValidDate,
      isAfterDate,
    };
  },
});
</script>

<style></style>
