<template>
  <DynamicForm
    class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
    :formInputs="updatedFormInputs"
    :formTitle="formTitleComputed"
    submit-label="Submit"
    @send="handleSubmit"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { DynamicForm } from '@masonitestudios/dynamic-vue';
import { PeachService } from '@/generated';

const props = defineProps<{ 
  formTitle?: string,
  initialValues?: Record<string, any>
}>();

const emit = defineEmits(['send']);

const formTitleComputed = computed(() => props.formTitle || 'peachCreateUserRequest');

const formInputs = [
  {
    id: 'username',
    label: 'Username',
    type: 'text',
    placeholder: '',
    required: false,
    defaultValue: '',
  },
  {
    id: 'bio',
    label: 'Bio',
    type: 'text',
    placeholder: '',
    required: false,
    defaultValue: '',
  },
];

const updatedFormInputs = computed(() => {
  return formInputs.map(input => {
    return {
      ...input,
      defaultValue: (props.initialValues && props.initialValues[input.id]) ?? input.defaultValue ?? ''
    }
  });
});

function handleSubmit(payload: any) {
  const requestData = { payload: payload };
  PeachService.peachCreateUser(requestData)
    .then(response => {
      emit('send', requestData.payload);
    })
    .catch(error => {
      console.error('Service error:', error);
    });
}
</script>
