<%
stimulus_controller = 'fields--color-picker'
form ||= current_fields_form

if defined?(options) && options.is_a?(Array)
  color_picker_field_options = options
  options = defined?(html_options) ? html_options : {}
  ActiveSupport::Deprecation.new.warn(
    "`options` will be replaced with `color_picker_field_options` in a later version. " \
    "Please pass all of the colors you want as strings to `color_picker_field_options`."
  )
end

options ||= {}
color_picker_field_options ||= options_for(form, method)
options.delete(:color_picker_options)

if defined?(html_options)
  ActiveSupport::Deprecation.new.warn(
    "The `html_options` attribute for color pickers will be removed in a later version. " \
    "Pass all of your html options like `class` to `options` instead."
  )
end

other_options ||= {}

options[:id] ||= form.field_id(method)

# TODO: I don't think multiple is even used for this attribute,
# we should probably delete this altogether.
options[:multiple] ||= false
if defined?(multiple)
  options[:multiple] = multiple
  ActiveSupport::Deprecation.new.warn(
    "The `multiple` attribute will be removed in a later version. " \
    "Please pass `options: {multiple: true}` to `render` instead."
  )
end

value = form.object.send(method)

color_selected_classes = "ring-2 ring-offset-2"

input_classes = "rounded-md shadow-sm font-light font-mono text-sm focus:ring-blue focus:border-blue border-slate-300 w-48 dark:bg-slate-800 dark:border-slate-900"
if options[:disabled]
  input_classes += " bg-slate-200 dark:bg-slate-700 hover:bg-slate-200 hover:dark:bg-slate-700"
  stimulus_controller = ""
end
%>

<% content = render 'shared/fields/field', form: form, method: method, options: options, other_options: other_options do %>
  <% content_for :field do %>
    <div class="space-x-1"
      data-controller="<%= stimulus_controller %>"
      data-<%= stimulus_controller %>-initial-color-value="<%= value %>"
      data-<%= stimulus_controller %>-color-selected-class="<%= color_selected_classes %>"
    >
      <%= form.hidden_field method, value: value, data: {"#{stimulus_controller}-target": "colorPickerValue"} %>
      <div class="inline space-x-1" data-<%= stimulus_controller %>-target="colorOptions">
        <% color_picker_field_options.each do |color| %>
          <label class="btn-toggle btn-color-picker">
            <button type="button"
                    class="button-color mb-1.5 dark:ring-offset-slate-700 <%= color == value ? color_selected_classes : '' %>"
                    style="background-color: <%= color %>; --tw-ring-color: <%= color %>"
                    data-action="<%= stimulus_controller %>#pickColor"
                    data-<%= stimulus_controller %>-target="colorButton"
                    data-color="<%= color %>"
                    <%= "disabled"if options[:disabled] %>>&nbsp;</button>
          </label>
        <% end %>
      </div>
      <label class="btn-toggle btn-color-picker">
        <button type="button" class="button-color mr-1 dark:ring-offset-slate-700 <%= value.blank? || color_picker_field_options.include?(value) ? 'hidden' : color_selected_classes %>" data-action="<%= stimulus_controller %>#pickColor" data-<%= stimulus_controller %>-target="userSelectedColor colorButton" data-color="<%= value %>" style="background-color: <%= value %>; --tw-ring-color: <%= value %>">&nbsp;</button>
      </label>
      <span class="relative">
        <input type="text" disabled="disabled" class="<%= input_classes %>" value="<%= value %>" data-<%= stimulus_controller %>-target="colorInput"/>
        <span class="absolute right-0">
          <button type="button" class="py-2 px-1 border border-transparent inline-flex items-center whitespace-nowrap rounded-md text-lg" data-action="<%= stimulus_controller %>#pickRandomColor">
            <i class="leading-5 ti ti-reload dark:text-blue-500"></i>
          </button>
          <button type="button" class="py-2 px-1 border border-transparent inline-flex items-center whitespace-nowrap rounded-md btn-pickr text-lg"
          data-<%= stimulus_controller %>-target="togglePickerButton" data-action="<%= stimulus_controller %>#togglePickr">
            <i class="leading-5 ti ti-pencil dark:text-blue-500"></i>
          </button>
          <span
            data-<%= stimulus_controller %>-target="pickerContainer"
            data-action="keydown-><%= stimulus_controller %>#handleKeydown"
          ></span>
          <button type="button" class="py-2 px-1 pr-3.5 border border-transparent inline-flex items-center whitespace-nowrap rounded-md text-lg" data-action="<%= stimulus_controller %>#unpickColor">
            <i class="leading-5 ti ti-trash dark:text-blue-500"></i>
          </button>
        </span>
      </span>
    </div>
  <% end %>
<% end %>

<%# The `-mb-1` is making up for the `mb-1` on each of the buttons. This allows them to wrap with appropriate vertical spacing. %>
<div class="-mb-1.5"><%= content %></div>