<script lang="ts" setup>
import { useService, vue } from '@factor/api'
import type { Site } from '../site'
import type { FactorSites } from '..'
import ElTool from './ElTool.vue'
import ElToolBanner from './ElToolBanner.vue'
import ToolForm from './ToolForm.vue'

const props = defineProps({
  site: { type: Object as vue.PropType<Site>, required: true },
})
useService<{ factorSites: FactorSites }>()

const tool = {
  toolId: 'settings',
  icon: 'i-tabler-settings',
  title: 'Settings',
}

const options = vue.computed(() => props.site.activeCard.value?.options.value || [])
</script>

<template>
  <ElTool v-if="site" :tool="tool">
    <ElToolBanner
      v-if="!site.editor.stateCardId"
      class="m-4"
      title="Make A Selection"
      sub="Element settings appear here"
      icon="i-tabler-click"
    />
    <ElToolBanner
      v-else-if="!options.length"
      class="m-4"
      title="No Options"
      sub="This element doesn't have any settings."
      icon="i-tabler-settings"
    />

    <ToolForm
      v-else
      v-model="site.activeCardConfig.value"
      :options="options"
    />
  </ElTool>
</template>
