import { defineComponent } from 'vue'
import { useUiTheme } from '../theme'
import { renderLanguageDialog } from './language-dialog/render'

export const DimSdkLanguageDialog = defineComponent({
  name: 'DimSdkLanguageDialog',
  props: {
    modelValue: { type: Boolean, required: true },
    w: { type: Number, default: 48 },
    h: { type: Number, default: 12 },
    backdrop: { type: Boolean, default: false },
    locale: { type: String, required: true },
  },
  emits: {
    'update:modelValue': (_v: boolean) => true,
    'update:locale': (_v: string) => true,
    apply: () => true,
    cancel: () => true,
  },
  setup(props, { emit }) {
    const ui = useUiTheme()
    return () => {
      return renderLanguageDialog(
        {
          modelValue: props.modelValue,
          w: props.w,
          h: props.h,
          backdrop: props.backdrop,
          locale: props.locale,
        },
        {
          updateModelValue: (v: boolean) => emit('update:modelValue', v),
          updateLocale: (v: string) => emit('update:locale', v),
          apply: () => emit('apply'),
          cancel: () => emit('cancel'),
        },
        ui,
      )
    }
  },
})
