<template>
  <PageForm
    title="Creating a project"
    back-link="/projects"
    :back-text="$t('back')"
    :submit-text="$t('create')"
    :handler="onSubmit"
  >
    <UiInput
      id="name"
      class="mb-6"
      :label="$t('field_max_characters', ['Project name', 16])"
      rules="required|max:16"
    />

    <UiInput
      id="description"
      class="mb-6"
      label="Description"
      rules="required"
    />

    <UiInput
      id="website"
      class="mb-6"
      label="Your website"
      :rules="{
        required: true,
        url: { optionalProtocol: true },
      }"
    />

    <UiInput
      id="callbacksUrl"
      class="mb-6"
      label="Callbacks URL"
      rules="required|url"
    />

    <UiInput
      id="userRedirectUrl"
      class="mb-6"
      label="User redirect URL"
      rules="required|url"
    />
  </PageForm>
</template>

<script setup>
definePageMeta({
  middleware: ['auth'],
  centerContent: true,
})

const notify = useNotify()

async function onSubmit(values) {
  try {
    await $api('/online_stores', {
      method: 'post',
      body: values,
    })

    notify({
      type: 'positive',
      text: 'Мерчант успешно создан',
    })

    navigateTo('/projects')
  }
  catch (e) {
    setStaticError({
      status: e.status,
      message: 'Something went wrong',
    })
  }
}
</script>
