<template>
  <o-simple-form-page class="ai-provider"
                      :loading="loading"
                      @submit="onSubmit"
                      enable-actions>
    <o-field :label="$t('name')" required>
      <q-input v-model="form.name" :placeholder="$t('name')"
               tabindex="1"
               class="pi-field name"
               standout dense clearable
               :error="v$.name.$errors.length > 0"
               :error-message="$t('required')">
        <template #before>
          <div class="cursor-pointer">
            <o-icon :name="form.icon || '🍃'" />
            <o-general-icon-menu anchor="center left"
                                 self="center right"
                                 :offset="[8, 0]"
                                 @select="onSelectIcon" />
          </div>
        </template>
        <template #after>
          <div class="cursor-pointer">
            <o-icon :name="form.color ? 'circle' : 'hide_source'"
                    :color="form.color" />
            <q-menu class="pi-menu"
                    anchor="center left"
                    self="center right"
                    :offset="[8, 0]">
              <section class="row q-pa-md"
                       style="max-width: 316px;">
                <o-color-select v-model="form.color"
                                class="row"
                                @select="onSelectColor" />
              </section>
            </q-menu>
          </div>
        </template>
      </q-input>
    </o-field>
    <o-field :label="$t('description')" required>
      <q-input v-model="form.desc" type="textarea" :placeholder="$t('description')"
               tabindex="2"
               class="pi-field"
               counter maxlength="256"
               standout dense clearable>
      </q-input>
    </o-field>
    <o-field :label="$t('type')" side required v-if="false">
      <q-select v-model="form.type"
                class="col-md-6 col-sm-12 col-xs-12"
                :options="WorkspaceTypes"
                :error="v$.type.$errors.length > 0"
                :error-message="$t('required')"
                map-options
                emit-value
                standout dense readonly />
    </o-field>

    <template #control>
      <footer class="row col-12 items-center justify-center bg-accent text-tips">
        Share workspaces.
      </footer>
    </template>
  </o-simple-form-page>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

import OSimpleFormPage from 'core/page/template/OSimpleFormPage.vue'
import OGeneralIconMenu from 'components/icon/OGeneralIconMenu.vue'
import OColorSelect from 'core/components/form/OColorSelect.vue'

import { GET } from 'src/hooks/useRequest'
import { notifyWarning } from 'core/utils/control'
import useForm from 'src/hooks/useForm'
import { getErrorMessage } from 'src/utils/request'
import useMetadata from 'src/hooks/useMetadata'

const apiName = 'workspace'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
})
const emit = defineEmits(['success'])

const { WorkspaceTypes } = useMetadata()
const { form, loading, actions } = useForm()

const rules = {
  name: { required },
}
const v$ = useVuelidate(rules, form)

function load () {
  actions.initForm(apiName)
  if (props.id) {
    GET({name: apiName, query: {id: props.id}}).then((data) => {
      form.value.name = data.name
      form.value.desc = data.desc
      form.value.type = data.type
      form.value.icon = data.icon
      form.value.color = data.color
    })
  } else {
    form.value.type = 'team'
    form.value.plan = 'basic'
    form.value.icon = '🍃'
  }
}

function onSelectIcon(options: Indexable) {
  form.value.icon = options.value
}

function onSelectColor(options: Indexable) {
  form.value.color = options.value
}

function onSubmit () {
  if (!actions.validate(v$)) {
    return
  }
  const body = {
    ...form.value,
    id: props.id,
  }

  actions.submit(
    body,
    (data) => {
      emit('success', data)
    },
    (err) => {
      const message = getErrorMessage(err)
      notifyWarning(message)
    }
  )
}

onMounted(() => {
  load()
})
</script>

<style lang="scss">
.ai-provider {
  .name {
    .q-field__before, .q-field__after {
      width: 40px;
      color: unset!important;
      background: var(--q-accent);
      padding: 0;
      border-radius: 4px;
      text-align: center;
      justify-content: center;
      align-items: center;

      &:hover {
        background: var(--q-dark);
      }

      .o-icon {
        font-size: 30px;
      }
    }
  }

  .q-field__before {
    margin-right: 6px;
  }

  .q-field__after {
    margin-left: 6px;
  }

  .q-field__prefix {
    min-width: 80px;
  }

  .connection {
    .o-badge {
      padding: 8px;
      margin: 0;
      font-size: 1rem;
      .q-icon {
        font-size: 1rem;
      }
    }
  }

  .link {
    font-size: 0.9rem;
  }
}
</style>
