<template>
  <Popup
    :show="show"
    closeable
    :closeIcon="false"
    :mask="mask === true"
    :size="size"
    position="bottom"
    @close="onClose"
  >
    <PlateKeyBoardInner
      v-bind="props"
      @finish="onFinish"
      @input="emit('input', $event)"
      @delete="emit('delete')"
      @cancel="onClose();emit('cancel')"
    />
  </Popup>
</template>

<script setup lang="ts">
import Popup from '../dialog/Popup.vue';
import { propGetThemeVar } from '../theme/ThemeDefine';
import type { PlateKeyBoardInnerProps } from './PlateKeyBoardInner.vue';
import PlateKeyBoardInner from './PlateKeyBoardInner.vue';


export interface PlateKeyBoardInstance {
  /**
   * 关闭键盘
   */
  close: () => void;
}
export interface PlateKeyBoardProps extends PlateKeyBoardInnerProps {
  /**
   * 是否显示键盘
   * @default false
   */
  show: boolean;
  /**
   * 是否显示键盘遮罩，显示遮罩时无法操作下方组件。
   * @default false
   */
  mask?: boolean;
  /**
   * 键盘大小
   * @default 'auto'
   */
  size?: string|number;
}

const emit = defineEmits([ 'delete', 'input', 'finish', 'cancel', 'update:show' ]);
const props = withDefaults(defineProps<PlateKeyBoardProps>(), {
  showFinishButton: () => propGetThemeVar('PlateKeyBoardShowFinishButton', true),
  showDeleteButton: () => propGetThemeVar('PlateKeyBoardShowDeleteButton', true),
  keyPressedImpactFeedback: () => propGetThemeVar('PlateKeyBoardKeyPressedImpactFeedback', true),
  size: 'auto',
});

const onClose = () => {
  emit('update:show', false);
}
const onFinish = (value: string) => {
  onClose();
  emit('finish');
}

defineExpose<PlateKeyBoardInstance>({
  close: onClose,
});

</script>