defmodule Shadix.Website.Components.Docs.Slider do
  @moduledoc false
  use Shadix.Website.Components.ComponentDoc
  use Phoenix.Component

  import Shadix.Components.Slider

  @impl true
  def description,
    do: "A native range input styled as a track-and-thumb slider, field-aware and accessible."

  @impl true
  def slot_example, do: ""

  @impl true
  def prop_overrides, do: %{:"aria-label" => "Volume", class: "w-full max-w-sm"}

  # `field` is a required struct attr — not a useful configurator control.
  @impl true
  def hidden_controls, do: [:field]

  @impl true
  def snippet(tag, props, defaults, slot) do
    tag
    |> Shadix.Website.Components.CodeGen.snippet(props, defaults, slot)
    |> String.replace_prefix(
      "<.slider",
      ~s|<.slider field={Phoenix.Component.to_form(%{"demo" => 50})[:demo]}|
    )
  end

  @impl true
  def preview(assigns) do
    ~H"""
    <.slider field={Phoenix.Component.to_form(%{"demo" => 50})[:demo]} {@props} />
    """
  end

  demo("Default", [description: "A slider at various positions."], """
  <div class="flex flex-col gap-6 w-full max-w-sm">
    <.slider
      field={Phoenix.Component.to_form(%{"volume_low" => 20})[:volume_low]}
      aria-label="Low"
    />
    <.slider
      field={Phoenix.Component.to_form(%{"volume_mid" => 50})[:volume_mid]}
      aria-label="Mid"
    />
    <.slider
      field={Phoenix.Component.to_form(%{"volume_high" => 80})[:volume_high]}
      aria-label="High"
    />
  </div>
  """)

  demo("Disabled", [description: "Pass the disabled global to prevent interaction."], """
  <.slider
    field={Phoenix.Component.to_form(%{"volume_disabled" => 40})[:volume_disabled]}
    class="w-full max-w-sm"
    aria-label="Volume"
    disabled
  />
  """)
end