<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
</html>
import { toolSelect } from '@agent/icons';
import { useWorkflowStore } from '@agent/state/workflows';
import { __ } from '@wordpress/i18n';
import { closeSmall, Icon } from '@wordpress/icons';
import classNames from 'classnames';

export const ChatTools = ({ disabled = false }) => {
	const { getWorkflowsByFeature, domToolEnabled, setDomToolEnabled } =
		useWorkflowStore();
	const domTool = getWorkflowsByFeature({ requires: ['block'] })?.length > 0;

	const handleClose = () => {
		window.dispatchEvent(new CustomEvent('extendify-agent:cancel-workflow'));
		setDomToolEnabled(!domToolEnabled);
	};

	if (!domTool) return null;
	return (
		<div className="flex items-center">
			<button
				type="button"
				disabled={disabled}
				className={classNames(
					'm-0 flex items-center rounded-sm border-0 px-1 py-0.5 leading-none disabled:opacity-50 text-gray-900',
					{
						'bg-gray-300': domToolEnabled,
						'bg-gray-100 text-gray-900': !domToolEnabled,
						'hover:bg-gray-200': !disabled,
					},
				)}
				onClick={handleClose}
			>
				<Icon size={24} icon={toolSelect} />
				<span className="px-1 text-sm font-medium">
					{__('Select', 'extendify-local')}
				</span>
				{domToolEnabled && (
					<Icon size={20} icon={closeSmall} className="fill-current" />
				)}
			</button>
		</div>
	);
};
