<?php

namespace Autogedal\InternalLinks\Block\Adminhtml\System\Config\Form\Field;

use Magento\Config\Block\System\Config\Form\Field;
use Magento\Backend\Block\Template\Context;
use Magento\Framework\Data\Form\Element\AbstractElement;
use Autogedal\InternalLinks\Model\Config\Source\BrandValues;

class BrandOrder extends Field
{
    private $brandValues;

    public function __construct(
        Context $context,
        BrandValues $brandValues,
        array $data = []
    ) {
        $this->brandValues = $brandValues;
        parent::__construct($context, $data);
    }

    protected function _getElementHtml(AbstractElement $element)
    {
        $element->setType('hidden');
        $html = parent::_getElementHtml($element);

        $brandOptions = $this->brandValues->toOptionArray();
        $currentValue = $element->getValue();
        $orderedValues = [];

        if ($currentValue) {
            $orderedValues = explode(',', $currentValue);
        }

        $html .= '<div class="brand-order-container" id="brand-order-container">';
        $html .= '<div class="brand-order-list" id="brand-order-list">';

        if (!empty($orderedValues)) {
            foreach ($orderedValues as $value) {
                foreach ($brandOptions as $option) {
                    if ($option['value'] == $value) {
                        $html .= '<div class="brand-order-item" data-value="' . $option['value'] . '">';
                        $html .= '<span class="drag-handle">⋮⋮</span>';
                        $html .= '<span class="brand-label">' . $option['label'] . '</span>';
                        $html .= '</div>';
                        break;
                    }
                }
            }
        }

        $html .= '</div>';
        $html .= '<div class="brand-order-available" id="brand-order-available">';
        $html .= '<h4>Available Brands</h4>';
        $html .= '<div class="available-list">';

        foreach ($brandOptions as $option) {
            if (!in_array($option['value'], $orderedValues)) {
                $html .= '<div class="brand-order-item available" data-value="' . $option['value'] . '">';
                $html .= '<span class="drag-handle">⋮⋮</span>';
                $html .= '<span class="brand-label">' . $option['label'] . '</span>';
                $html .= '</div>';
            }
        }

        $html .= '</div>';
        $html .= '</div>';
        $html .= '</div>';

        $html .= '<script type="text/javascript">
            require([
                "jquery",
                "jquery/ui"
            ], function($) {
                $(document).ready(function() {
                    var $container = $("#brand-order-container");
                    var $orderedList = $("#brand-order-list");
                    var $availableList = $("#brand-order-available .available-list");
                    var $hiddenField = $("#' . $element->getHtmlId() . '");

                    $orderedList.sortable({
                        handle: ".drag-handle",
                        connectWith: "#brand-order-available .available-list",
                        update: function() {
                            updateHiddenField();
                        }
                    });

                    $availableList.sortable({
                        handle: ".drag-handle",
                        connectWith: "#brand-order-list",
                        update: function() {
                            updateHiddenField();
                        }
                    });

                    function updateHiddenField() {
                        var values = [];
                        $orderedList.find(".brand-order-item").each(function() {
                            values.push($(this).data("value"));
                        });
                        $hiddenField.val(values.join(","));
                    }

                    updateHiddenField();
                });
            });
        </script>';

        return $html;
    }
}
