<script lang="ts">
	import { base } from '$lib/base'
	import { Button } from '../common'

	import { SUPPORTED_LANGUAGES } from './lib'
	import type { SupportedLanguage } from '$lib/common'
	import Popover from '$lib/components/meltComponents/Popover.svelte'
	import { autoPlacement } from '@floating-ui/core'
	import { WandSparkles } from 'lucide-svelte'
	import { aiChatManager } from './chat/AIChatManager.svelte'
	import { copilotInfo } from '$lib/aiStore'

	let {
		lang
	}: {
		lang: SupportedLanguage
	} = $props()
</script>

{#if SUPPORTED_LANGUAGES.has(lang)}
	<Popover
		floatingConfig={{
			middleware: [
				autoPlacement({
					allowedPlacements: ['bottom-end', 'top-end']
				})
			]
		}}
		displayArrow={true}
	>
		{#snippet trigger()}
			
				<div class="flex flex-row">
					<Button
						title="Fix code"
						size="xs"
						color="light"
						spacingSize="xs2"
						startIcon={{ icon: WandSparkles }}
						on:click={() => {
							if ($copilotInfo.enabled) {
								aiChatManager.fix()
							}
						}}
						btnClasses="text-ai bg-violet-100 dark:bg-gray-700 min-w-[84px]"
						propagateEvent={!$copilotInfo.enabled}
					>
						AI Fix
					</Button>
				</div>
			
			{/snippet}
		{#snippet content()}
			
				<div class="p-4">
					<div class="w-80">
						<p class="text-sm"
							>Enable Windmill AI in the <a
								class="inline-flex flex-row items-center gap-1"
								href="{base}/workspace_settings?tab=ai"
								target="_blank">workspace settings</a
							></p
						></div
					>
				</div>
			
			{/snippet}
	</Popover>
{/if}
