<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import { defineProps, defineEmits } from 'vue'
import type { PropType } from 'vue'

// 1) runtime props so Vue + TS agree
const props = defineProps({
  modelValue: {
    type: Boolean as PropType<boolean>,
    required: true,
  },
})

// 2) two emits: v-model and confirm
const emit = defineEmits<{
  (e: 'update:modelValue', v: boolean): void
  (e: 'confirm'): void
}>()

function onSave() {
  emit('confirm')
  // close the dialog
  emit('update:modelValue', false)
}
</script>

<template>
  <Dialog
    :open="props.modelValue"
    @update:open="(v: boolean) => emit('update:modelValue', v)"
  >
    <DialogContent class="sm:max-w-[425px]">
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to user credentials below.
        </DialogDescription>
      </DialogHeader>

      <div class="grid gap-4 py-4">
        <div class="grid grid-cols-4 items-center gap-4">
          <Label for="username" class="text-right">Username</Label>
          <Input id="username" class="col-span-3" />
        </div>
        <div class="grid grid-cols-4 items-center gap-4">
          <Label for="password" class="text-right">Password</Label>
          <Input id="password" class="col-span-3" type="password" />
        </div>
          <div class="grid grid-cols-4 items-center gap-4">
          <Label for="isAdmin" class="text-right">Make admin</Label>
          <Switch id="isAdmin"/>
        </div>
      </div>

      <DialogFooter>
        <Button @click="onSave">Save changes</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>