<%# locals: (form:) %>

<% action = form.object %>
<% rule = action.rule %>

<li data-controller="rule--actions" data-rule--actions-action-executors-value="<%= rule.action_executors.to_json %>" class="flex items-center gap-3">
  <%= form.hidden_field :_destroy, value: false, data: { rule__actions_target: "destroyField" } %>

  <div class="grow flex gap-2 items-center h-full">
    <div class="grow">
      <%= form.select :action_type, rule.action_executors.map { |executor| [ executor.label, executor.key ] }, {}, data: { action: "rule--actions#handleActionTypeChange" } %>
    </div>

    <%= tag.div class: class_names("min-w-1/2 flex items-center gap-2"),
                data: { rule__actions_target: "actionValue" } do %>
      <%# Initial rendering based on rule.action_executors.first from the rule form. %>
      <%# This is currently always SetTransactionCategory from transaction_resource.rb, which is a select type. %>
      <%# Subsequent renders are injected by the Stimulus controller, which uses the templates from below. %>
      <span class="font-medium text-primary uppercase text-xs">to</span>
      <%= form.select :value, action.options || [], {} %>
    <% end %>
  </div>

  <%= icon(
    "trash-2",
    size: "sm",
    as_button: true,
    data: { action: "rule--actions#remove", rule__actions_destroy_param: action.persisted? }) %>

  <%# Templates for different input types - these will be cloned and used by the Stimulus controller %>
  <template data-rule--actions-target="selectTemplate">
    <span class="font-medium text-primary uppercase text-xs">to</span>
    <%= form.select :value, [], {} %>
  </template>

  <template data-rule--actions-target="textTemplate">
    <span class="font-medium text-primary uppercase text-xs">to</span>
    <%= form.text_field :value, placeholder: "Enter a value" %>
  </template>

  <%# The function type doesn't need an input, so no template is required.%>
</li>
