<script lang="ts">
import { type PropType, defineComponent, shallowRef } from 'vue';

import { getResourceDisplayText } from '../../../../../../common/zkan-utils.js';
import type { Resource } from '../../../../../../composables/resourcestore';
import type { Event } from '../../../../../../composables/eventstore';


export default defineComponent({
  name: 'PagesMasterTimetableResourcesIdTimelineeventinput_EventChangeDialog',
  props: {
    open: { type: Boolean, required: true },
    fromEvent: {
      type: [Object, null] as PropType<Event | null>, required: true,
    },
  },
  emits: {
    finish: (detail: { type: 'cancel' } | {
      type: 'eventChange' | 'eventCancel'
      causeResources: Resource[],
      resourceHourUnfillRange: 'none' | 'time' | 'day',
    }) => true,
  },
  setup(props, { emit }) {
    const type = shallowRef<'' | 'cancel' | 'change'>('');
    const causeResources = shallowRef<Resource[]>([]);
    const resourceHourUnfillRange = shallowRef<'none' | 'time' | 'day'>(
      'none'
    );

    function closed() {
      if(props.open) {
        emit('finish', { type: 'cancel' });
      }
    }

    function submit() {
      if(!type.value) return;
      emit('finish', {
        type: { cancel: 'eventCancel', change: 'eventChange' }[type.value] as 'eventCancel' | 'eventChange',
        causeResources: causeResources.value,
        resourceHourUnfillRange: resourceHourUnfillRange.value,
      });
    }

    return {
      getResourceDisplayText,
      type, causeResources, resourceHourUnfillRange, submit, closed,
    };
  },
});
</script>

<template>
<app-dialog :open="open" @update:open="$event => {
  if(!$event) closed();
}">
  <form v-if="fromEvent" @submit.prevent="submit()">
    <p>
      <label>
        <input type="radio" name="type" v-model="type" value="cancel" />取消
      </label>
      <label>
        <input type="radio" name="type" v-model="type" value="change" />振替
      </label>
    </p>
    <fieldset>
      <legend>原因リソース（どのリソースの都合で振替/取消するのか）</legend>
      <label v-for="resource of fromEvent.resources" :key="resource.id">
        <input
          type="checkbox" :value="resource" v-model="causeResources"
        /> {{ getResourceDisplayText(resource) }}
      </label>
    </fieldset>
    <p>
      <label>
        可能時間修正:
        <select v-model="resourceHourUnfillRange">
          <option value="none">行わない</option>
          <option value="time">「原因リソース」で指定されたリソースについて変更元の時刻を可能時間から外す</option>
          <option value="day">「原因リソース」で指定されたリソースについて変更元の日付全体を可能時間から外す</option>
        </select>
      </label>
    </p>
    <p>
      <button v-if="type">{{ {
        cancel: '取り消す', change: '振り替え先選択'
      }[type] }}</button>
    </p>
  </form>
</app-dialog>
</template>
