import Handlebars from "handlebars";
import {Controller} from "@hotwired/stimulus";

const processorFrame = Handlebars.compile(`
    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between">
        <span>{{name}}</span>
        <a href="#" class="btn btn-sm btn-secondary float-end">X</a>
      </div>
      <div class="card-body">
        {{{props}}}
      </div>
    </div>
`);

const processors = [
    {
        name: "shadow",
        label: "Shadow",
        template: Handlebars.compile(`This processor has no properties.`),
    },
    {
        name: "resize",
        label: "Resize",
        template: Handlebars.compile(`
            <div class="mb-3">
              <label for="{{id}}_width" class="form-label">Width</label>
              <input name="width" class="form-control" id="{{id}}_width">
            </div>
            <div class="mb-3">
              <label for="{{id}}_height" class="form-label">Height</label>
              <input name="width" class="form-control" id="{{id}}_width">
            </div>
        `),
    }
];

export default class UploadEditController extends Controller {
    static targets = ['processList'];

    connect() {
        this._rebuildProcessList();
    }

    _rebuildProcessList() {
        let el = this.processListTarget;

        // TEMP
        let cardTemplate = processors[0].template({
            "id": "shadow",
        });
        let cardOuter = processorFrame({
            name: processors[0].label,
            props: cardTemplate,
        });
        el.innerHTML = cardOuter;
        // END TEMP
    }
}