<template>
  <ActionSheet 
    v-bind="options"
    :show="show"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ActionSheet, { type ActionSheetProps } from './ActionSheet.vue';

export interface ActionSheetOptions extends Omit<ActionSheetProps, 'show'> {
  onSelect?: (index: number, name: string) => void;
  onClose?: () => void;
}
export interface ActionSheetRoot {
  show(options: ActionSheetOptions): Promise<void>;
}

const show = ref(false);
const options = ref<ActionSheetOptions>();

defineExpose<ActionSheetRoot>({
  show(_options: ActionSheetOptions) {
    show.value = true;
    options.value = _options;

    const onSelect = _options.onSelect;
    const onClose = _options.onClose;

    return new Promise<void>((resolve) => {
      _options.onClose = () => {
        show.value = false;
        onClose?.();
        resolve();
      };
      _options.onSelect = (i: number, n: string) => {
        show.value = false;
        onSelect?.(i, n);
        resolve();
      };
      options.value = _options;
      show.value = true;
    });
  },
})
</script>