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

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
import { Store, useStore } from 'vuex';
import { StateInterface } from 'src/store';
import { ScheduleInterface } from '../../store/schedule';
import { date } from 'quasar';
interface Props {
  job: FG.Job;
  jobCanDelete: boolean;
}
export default defineComponent({
  name: 'Job',
  components: { IsoDateInput },
  props: {
    job: {
      required: true,
    },
    jobCanDelete: {
      default: false,
    },
  },
  watch: {
    job: function () {
      // this.type.name = this.type.name;
      this.$props.job.type = this.$props.job.type;
    },
  },

  setup(props: Props, { root, emit }) {
    //const store = <Store<StateInterface>>root.$store;
    const store = useStore<Store<StateInterafce>>();
    const state = <ScheduleInterface>store.state.schedule;
    const jobtypes = computed(() => state.jobTypes);
    // job = computed(() => job);
    function setStart(value: Date) {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      emit('set-start', { job: props.job, value });
    }

    function setEnd(value: Date) {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      emit('set-end', { job: props.job, value });
    }

    function setComment(value: string) {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      emit('set-comment', { job: props.job, value });
    }

    function setJobType(value: FG.JobType) {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      console.log('setJobType', value);
      emit('set-job-type', { job: props.job, value });
      refresh();
    }

    function setRequired(value: number) {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      emit('set-required', { job: props.job, value });
    }

    function removeJob() {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      emit('remove-job');
    }

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

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

    const refreshKey = ref(0);

    function refresh() {
      refreshKey.value += 1;
    }

    return {
      jobtypes,
      setStart,
      setEnd,
      setComment,
      setJobType,
      setRequired,
      removeJob,
      notEmpty,
      noValidDate,
      isAfterDate,
      refreshKey,
    };
  },
});
</script>

<style></style>