<script setup lang="ts">
import type { DayEditFormState, SlotTypeOption } from '../types';

import type { SlotType } from '#/api/store-hours';

import { Button, Drawer, TimePicker } from 'ant-design-vue';

interface Props {
  dayEditForm: DayEditFormState;
  isWeeklySubmitting: boolean;
  onSetDayOpen: (value: boolean) => void;
  onSetSlotCapacity: (slotId: string, value: number) => void;
  onSetSlotEndTime: (slotId: string, value: string) => void;
  onSetSlotStartTime: (slotId: string, value: string) => void;
  onSetSlotType: (slotId: string, value: SlotType) => void;
  open: boolean;
  slotTypeDelivery: SlotType;
  slotTypeOptions: SlotTypeOption[];
  title: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'addSlotRow'): void;
  (event: 'removeSlot', slotId: string): void;
  (event: 'save'): void;
  (event: 'update:open', value: boolean): void;
}>();

function getInputValue(event: Event) {
  const target = event.target as HTMLInputElement | null;
  return target?.value ?? '';
}

function hasFormatMethod(
  value: unknown,
): value is { format: (pattern: string) => string } {
  return Boolean(
    value &&
    typeof value === 'object' &&
    'format' in value &&
    typeof (value as { format?: unknown }).format === 'function',
  );
}

function readTimeValue(value: unknown) {
  if (typeof value === 'string') return value;
  if (hasFormatMethod(value)) return value.format('HH:mm');
  return '';
}

function getCheckedValue(event: Event) {
  const target = event.target as HTMLInputElement | null;
  return Boolean(target?.checked);
}

function getSlotTypePillClass(type: SlotType) {
  const value = Number(type);
  if (value === 1) return 'tp-biz';
  if (value === 2) return 'tp-del';
  return 'tp-pick';
}
</script>

<template>
  <Drawer
    class="day-edit-drawer-wrap"
    :open="props.open"
    :title="props.title"
    :width="520"
    :mask-closable="true"
    @update:open="(value) => emit('update:open', value)"
  >
    <div class="day-open-row">
      <label class="day-open-toggle">
        <input
          type="checkbox"
          :checked="props.dayEditForm.isOpen"
          @change="(event) => props.onSetDayOpen(getCheckedValue(event))"
        />
        <span class="day-open-slider"></span>
      </label>
      <span class="day-open-text">今日营业</span>
      <span v-if="!props.dayEditForm.isOpen" class="day-close-hint">
        该日休息，不接单
      </span>
    </div>

    <div
      class="slot-edit-list"
      :class="{ disabled: !props.dayEditForm.isOpen }"
    >
      <div
        v-for="slot in props.dayEditForm.slots"
        :key="slot.id"
        class="slot-edit-card"
      >
        <div class="slot-edit-head">
          <div class="slot-type-pill-group">
            <button
              v-for="item in props.slotTypeOptions"
              :key="item.value"
              type="button"
              class="slot-type-pill"
              :class="[
                getSlotTypePillClass(item.value),
                { active: slot.type === item.value },
              ]"
              @click="props.onSetSlotType(slot.id, item.value)"
            >
              {{ item.label }}
            </button>
          </div>
          <button
            type="button"
            class="slot-remove-btn"
            @click="emit('removeSlot', slot.id)"
          >
            删除
          </button>
        </div>

        <div class="time-grid">
          <div class="form-block">
            <label class="form-sub-label">开始</label>
            <TimePicker
              :value="slot.startTime"
              value-format="HH:mm"
              format="HH:mm"
              :allow-clear="false"
              class="native-picker"
              input-read-only
              @update:value="
                (value) =>
                  props.onSetSlotStartTime(slot.id, readTimeValue(value))
              "
            />
          </div>
          <div class="form-block">
            <label class="form-sub-label">结束</label>
            <TimePicker
              :value="slot.endTime"
              value-format="HH:mm"
              format="HH:mm"
              :allow-clear="false"
              class="native-picker"
              input-read-only
              @update:value="
                (value) => props.onSetSlotEndTime(slot.id, readTimeValue(value))
              "
            />
          </div>
        </div>

        <div
          v-if="slot.type === props.slotTypeDelivery"
          class="form-block delivery-capacity-block"
        >
          <label class="capacity-title">配送上限</label>
          <div class="capacity-row">
            <input
              :value="slot.capacity"
              type="number"
              class="native-input capacity-input"
              min="1"
              step="1"
              @input="
                (event) => {
                  const value = Number(getInputValue(event));
                  props.onSetSlotCapacity(
                    slot.id,
                    Number.isFinite(value) ? value : 0,
                  );
                }
              "
            />
            <span class="capacity-unit">单/小时</span>
          </div>
          <div class="capacity-tip">每小时最大可接配送订单数</div>
        </div>
      </div>

      <button type="button" class="add-dashed-btn" @click="emit('addSlotRow')">
        + 添加时段
      </button>
    </div>

    <template #footer>
      <div class="drawer-footer">
        <Button @click="emit('update:open', false)">取消</Button>
        <Button
          type="primary"
          :loading="props.isWeeklySubmitting"
          @click="emit('save')"
        >
          保存修改
        </Button>
      </div>
    </template>
  </Drawer>
</template>
