<script setup lang="ts">
  import { InputGroup, InputNumber, Select } from 'ant-design-vue';
  import { TriggerUnitEnum } from '/@/enums/linkedgeEnum';

  withDefaults(
    defineProps<{
      value?: number;
      unit?: TriggerUnitEnum;
      unitOptions: Record<'label' | 'value', any>[];
      disabled?: boolean;
    }>(),
    {
      value: undefined,
      unit: TriggerUnitEnum.SECONDS,
      unitOptions: () => [],
    }
  );
  const emit = defineEmits(['unitChange', 'update:unit', 'update:value']);

  const handleUnitChange = (value: TriggerUnitEnum) => {
    emit('update:unit', value);
    emit('unitChange', value);
  };
</script>

<template>
  <InputGroup class="!flex" compact>
    <InputNumber
      :disabled="disabled"
      :value="value"
      :min="0"
      @change="$emit('update:value', $event)"
      v-bind="$attrs"
    />
    <Select
      :disabled="disabled"
      :value="unit"
      :options="unitOptions"
      :allow-clear="false"
      @change="handleUnitChange"
    />
  </InputGroup>
</template>