<template>
  <div
    @click="$emit('toggle')"
    class="flex flex-col border rounded-lg p-4 px-5 cursor-pointer transition-all hover:bg-primary/5 max-h-[200px]"
    :class="{
      'border-primary-alpha-dark-60 bg-primary/10': isSelected,
      'border-border bg-white': !isSelected,
    }"
  >
    <div class="flex items-start justify-between" :class="{ 'mb-2': tool.description }">
      <div class="flex items-center space-x-2">
        <div class="p-1 rounded-full bg-[#D96D9C] text-white">
          <i :class="getToolIcon(tool.type)" />
        </div>
        <h3
          class="font-semibold"
          :class="{
            'text-primary-alpha-dark-60': isSelected,
          }"
        >
          {{ tool.name }}
        </h3>
      </div>
      <Switch :modelValue="isSelected" class="my-auto" />
    </div>

    <div class="flex flex-1 overflow-y-auto">
      <p class="text-sm text-muted-foreground mb-3">{{ tool.description }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Switch } from '@/components/ui/switch'

const AGENT_TOOL_TYPES_UI_DATA = [
  {
    type: 'InlinePython',
    icon: 'dku-icon-python-20',
  },
  {
    type: 'DatasetRowLookup',
    icon: 'dku-icon-dataset-20',
  },
  {
    type: 'VectorStoreSearch',
    icon: 'dku-icon-cards-stack-20',
  },
  {
    type: 'LLMMeshLLMQuery',
    icon: 'dku-icon-ai-prompt-20',
  },
  {
    type: 'DatasetRowAppend',
    icon: 'dku-icon-data-table-row-20',
  },
  {
    type: 'DataikuReporter',
    icon: 'dku-icon-data-user-email-20',
  },
  {
    type: 'ClassicalPredictionModelPredict',
    icon: 'dku-icon-automl-prediction-20',
  },
  {
    type: 'GRELCalculator',
    icon: 'dku-icon-calculator-20',
  },
]

function getToolIcon(toolType: string): string {
  const toolTypeData = AGENT_TOOL_TYPES_UI_DATA.find((data) => data.type === toolType)
  return toolTypeData ? toolTypeData.icon : 'dku-icon-ai-agent-20'
}

interface Tool {
  id: string
  name: string
  description: string
  type: string
}

interface Props {
  tool: Tool
  isSelected: boolean
}

defineProps<Props>()

defineEmits<{
  (e: 'toggle'): void
}>()
</script>
