import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    initialize() {
        this._onPreConnect = this._onPreConnect.bind(this);
        this._onConnect = this._onConnect.bind(this);
    }

    connect() {
        document.querySelector("#search").onsubmit = (event) => {
            event.preventDefault();
            const autocompleteController = this.application.getControllerForElementAndIdentifier(this.element, 'symfony--ux-autocomplete--autocomplete')
            window.location.href = `/search?term=${autocompleteController.tomSelect.lastValue}`
        }
        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect);
        this.element.addEventListener('autocomplete:connect', this._onConnect);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side-effects
        this.element.removeEventListener('autocomplete:connect', this._onConnect);
        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect);
    }

    _onPreConnect(event) {
        // TomSelect has not been initialized - options can be changed
        // console.log(event.detail); // Options that will be used to initialize TomSelect
        event.detail.options.onItemAdd = (value, $item) => {
            const params = value.split('|')
            window.location.href = `/result/${params[0]}/${params[1]}`
        };
        event.detail.options.render.loading = (data, escape) => {
            return `
            <span data-controller="loading-icon" data-loading-icon-total-value="52" data-loading-icon-count-value="20" class="loading-icon">
                <svg viewBox="0 0 24 24" fill="currentColor" height="20" width="20" data-loading-icon-target="icon" class="text-end" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M12 6.99998C9.1747 6.99987 6.99997 9.24998 7 12C7.00003 14.55 9.02119 17 12 17C14.7712 17 17 14.75 17 12"><animateTransform attributeName="transform" attributeType="XML" dur="560ms" from="0,12,12" repeatCount="indefinite" to="360,12,12" type="rotate"></animateTransform></path></svg>
            </span>
`;
        }
        event.detail.options.render.option = (data, escape) => {
            if (data.data.description.length > 60) {
                data.data.description = data.data.description.substring(0, 107) + "...";
            }
            return `<div class="flex flex-row">
                        <img src="${data.data.poster}" class="w-16 rounded-md">
                        <div class="p-2 flex flex-col">
                            <h2>${data.data.title}</h2>
                            <p class="max-w-[60ch] text-wrap">${data.data.description}</p>
                        </div>
                    </div>
`
        }
    }

    _onConnect(event) {
        // TomSelect has just been initialized and you can access details from the event
        // console.log(event.detail.tomSelect); // TomSelect instance
        // console.log(event.detail.options); // Options used to initialize TomSelect
    }
}