<template>
  <Modal ref="modalRef" size="md">
    <template #title>
      Create a new storage {{ set === true ? 'set' : '' }}
    </template>

    <template #default="{ closeModal }">
      <Form @submit="onSubmit" v-model="data" :validators="validators">
        <FormField name="displayName" label="Display Name" />
        <FormField name="type" label="Type" />
        <button type="submit">Submit</button>
      </Form>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BuildingListItem } from '../../interfaces/building.interfaces';
import { RoomListItem } from '../../interfaces/room.interfaces';
import { StorageSetListItem } from '../../interfaces/storage.interfaces';
import { FormSubmit } from '../form/form.types';
import Form from '../form/Form.vue';
import FormField from '../form/FormField.vue';
import { IsRequired, MinLength } from '../form/validators';
import Modal from '../Modal.vue';

const modalRef = ref<InstanceType<typeof Modal>>();
const room = ref<RoomListItem>();
const building = ref<BuildingListItem>();
const set = ref<StorageSetListItem | boolean>();
const data = ref({
  displayName: '',
});

const validators = ref([
  {
    field: 'displayName',
    validators: [MinLength(3), IsRequired()],
  },
  {
    field: 'type',
    validators: [IsRequired()],
  },
]);

defineExpose({
  openModal: (
    useBuilding: BuildingListItem,
    useRoom: RoomListItem,
    useSet?: StorageSetListItem | boolean
  ) => {
    room.value = useRoom;
    building.value = useBuilding;
    set.value = useSet;
    modalRef.value?.openModal();
  },
});

const onSubmit = (value: FormSubmit) => console.log(value);
</script>
