<%# locals: (form:, colors:, icons:) %>
<div data-controller="color-icon-picker" data-color-icon-picker-preset-colors-value="<%= colors %>">
  <div class="w-fit relative">
    <span class="inline-flex items-center justify-center w-11 h-11 rounded-xl font-semibold text-base"
          style="background-color: color-mix(in oklab, <%= form.object.color %> 10%, transparent); color: <%= form.object.color %>;"
          data-color-icon-picker-target="avatar">
      <% if form.object.icon.present? %>
        <%= icon(form.object.icon, color: "current", size: "md") %>
      <% else %>
        <%= form.object.name.to_s.strip.first&.upcase || "?" %>
      <% end %>
    </span>

    <details data-color-icon-picker-target="details" data-action="mousedown->color-icon-picker#handleOutsideClick">
      <summary class="cursor-pointer absolute -bottom-1 -right-1 flex justify-center items-center bg-surface-inset hover:bg-surface-inset-hover border-2 w-6 h-6 border-subdued rounded-full text-secondary">
        <%= icon("pen", size: "xs") %>
      </summary>

      <div class="absolute left-0 sm:left-auto sm:right-0 mt-2 z-50 bg-container p-4 border border-alpha-black-25 rounded-2xl shadow-xs h-fit w-87 max-w-[calc(100vw-2rem)]" data-color-icon-picker-target="popup">
        <div class="flex gap-2 flex-col mb-4" data-color-icon-picker-target="selection">
          <div data-color-icon-picker-target="pickerSection"></div>
          <h4 class="text-secondary text-sm">Color</h4>
          <div class="flex flex-wrap md:flex-nowrap gap-2 items-center" data-color-icon-picker-target="colorsSection">
            <% colors.each do |c| %>
              <label class="relative">
                <%= form.radio_button :color, c, class: "sr-only peer", data: { action: "change->color-icon-picker#handleColorChange" } %>
                <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-500" style="background-color: <%= c %>"></div>
              </label>
            <% end %>
            <label class="relative">
              <%= form.radio_button :color, "custom-color", class: "sr-only peer", data: { color_icon_picker_target: "colorPickerRadioBtn" } %>
              <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" data-color-icon-picker-target="pickerBtn" style="background: conic-gradient(red,orange,yellow,lime,green,teal,cyan,blue,indigo,purple,magenta,pink,red)"></div>
            </label>
          </div>
          <div class="flex gap-2 items-center hidden flex-col" data-color-icon-picker-target="paletteSection">
            <div class="flex gap-2 items-center w-full">
              <div class="w-6 h-6 p-4 rounded-full cursor-pointer" style="background-color: <%= form.object.color %>" data-color-icon-picker-target="colorPreview"></div>
              <%= form.text_field :color, data: { color_icon_picker_target: "colorInput" }, inline: true, pattern: "^#[0-9A-Fa-f]{6}$" %>
              <%= icon "palette", size: "2xl", data: { action: "click->color-icon-picker#toggleSections" } %>
            </div>
            <div data-color-icon-picker-target="validationMessage" class="hidden self-start flex gap-1 items-center text-xs text-destructive">
              <span>Poor contrast, choose darker color or</span>
              <button type="button" class="underline cursor-pointer" data-action="color-icon-picker#autoAdjust">auto-adjust.</button>
            </div>
          </div>
        </div>

        <div class="flex flex-wrap gap-2 justify-center flex-col">
          <h4 class="text-secondary text-sm">Icon</h4>
          <div class="flex flex-wrap gap-0.5 max-h-52 overflow-auto">
            <% icons.each do |icon_name| %>
              <label class="relative">
                <%= form.radio_button :icon, icon_name, class: "sr-only peer", data: { action: "change->color-icon-picker#handleIconChange change->color-icon-picker#handleIconColorChange", color_icon_picker_target: "icon" } %>
                <div class="text-secondary w-7 h-7 flex m-0.5 items-center justify-center rounded-full cursor-pointer hover:bg-container-inset-hover peer-checked:bg-container-inset border-1 border-transparent">
                  <%= icon(icon_name, size: "sm", color: "current") %>
                </div>
              </label>
            <% end %>
          </div>
        </div>
      </div>
    </details>
  </div>
</div>
