<script lang="ts" setup>
import type { ActionItem, vue } from '@factor/api'
import { toLabel } from '@factor/api'
import type { EditorTool } from './tools'

defineProps({
  tool: {
    type: Object as vue.PropType<EditorTool>,
    required: true,
  },
  actions: {
    type: Array as vue.PropType<ActionItem[]>,
    default: () => [],
  },
  back: {
    type: Object as vue.PropType<ActionItem>,
    default: undefined,
  },
  title: {
    type: String,
    default: '',
  },
})
</script>

<template>
  <div class="tool">
    <div
      class="flex justify-between p-4 items-center select-none z-10  "
    >
      <div>
        <div v-if="back" class="mb-3">
          <div

            class="inline-block text-[10px] rounded-md py-0.5 px-2 bg-theme-50 uppercase font-semibold tracking-wide cursor-pointer text-theme-400 hover:bg-theme-100"
            @click.stop="back.onClick?.({ event: $event })"
          >
            &larr; {{ back?.name || "Back" }}
          </div>
        </div>
        <h3 class="font-semibold">
          {{ title || tool.title || toLabel(tool.toolId) }}
        </h3>
      </div>
      <div class="">
        <div
          v-for="(item, i) in actions"
          :key="i"
          class="transition-all cursor-pointer text-theme-600 hover:bg-primary-100 hover:text-primary-500 rounded-md bg-theme-50 p-1 text-xl border border-theme-300 hover:border-primary-300"
          @click="item.onClick?.({ event: $event, item })"
        >
          <div
            :class="item.icon"
            class=""
          />
        </div>
      </div>
    </div>

    <div class="">
      <slot />
    </div>
  </div>
</template>

<style lang="less" scoped>
.tool {
  --input-bg: theme("colors.theme.50");
}
</style>
