lib/petal_components/tabs.ex

defmodule PetalComponents.Tabs do
  use Phoenix.Component

  alias PetalComponents.Link

  import PetalComponents.Helpers

  attr(:underline, :boolean, default: false, doc: "underlines your tabs")
  attr(:class, :string, default: "", doc: "CSS class")
  attr(:rest, :global)
  slot(:inner_block, required: false)

  def tabs(assigns) do
    ~H"""
    <div
      {@rest}
      class={
        build_class(
          [
            "pc-tabs",
            if(@underline, do: "pc-tabs--underline", else: ""),
            @class
          ],
          " "
        )
      }
    >
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

  attr(:class, :string, default: "", doc: "CSS class")
  attr(:label, :string, default: nil, doc: "labels your tab")

  attr(:link_type, :string,
    default: "a",
    values: ["a", "live_patch", "live_redirect"]
  )

  attr(:to, :string, default: nil, doc: "link path")
  attr(:number, :integer, default: nil, doc: "indicates a number next to your tab")
  attr(:underline, :boolean, default: false, doc: "underlines your your tab")
  attr(:is_active, :boolean, default: false, doc: "indicates the current tab")
  attr(:rest, :global, include: ~w(method download hreflang ping referrerpolicy rel target type))
  slot(:inner_block, required: false)

  def tab(assigns) do
    ~H"""
    <Link.a
      link_type={@link_type}
      label={@label}
      to={@to}
      class={"#{get_tab_class(@is_active, @underline)} #{@class}"}
      {@rest}
    >
      <%= if @number do %>
        <%= render_slot(@inner_block) || @label %>

        <span class={get_tab_number_class(@is_active, @underline)}>
          <%= @number %>
        </span>
      <% else %>
        <%= render_slot(@inner_block) || @label %>
      <% end %>
    </Link.a>
    """
  end

  # Pill CSS
  defp get_tab_class(is_active, false) do
    base_classes = "pc-tab__pill"

    active_classes =
      if is_active,
        do: "pc-tab__pill--is-active",
        else: "pc-tab__pill--is-not-active"

    build_class([base_classes, active_classes])
  end

  # Underline CSS
  defp get_tab_class(is_active, underline) do
    base_classes = "pc-tab__underline"

    active_classes =
      if is_active,
        do: "pc-tab__underline--is-active",
        else: "pc-tab__underline--is-not-active"

    underline_classes =
      if is_active && underline,
        do: "pc-tab__underline--with-underline-and-is-active",
        else: "pc-tab__underline--with-underline-and-is-not-active"

    build_class([base_classes, active_classes, underline_classes])
  end

  # Underline
  defp get_tab_number_class(is_active, true) do
    base_classes = "pc-tab__number"

    active_classes =
      if is_active,
        do: "pc-tab__number__underline--is-active",
        else: "pc-tab__number__underline--is-not-active"

    underline_classes =
      if is_active,
        do: "pc-tab__number__underline--with-underline-and-is-active",
        else: "pc-tab__number__underline--with-underline-and-is-not-active"

    build_class([base_classes, active_classes, underline_classes])
  end

  # Pill
  defp get_tab_number_class(is_active, false) do
    base_classes = "pc-tab__number"

    active_classes =
      if is_active,
        do: "pc-tab__number__pill--is-active",
        else: "pc-tab__number__pill--is-not-active"

    build_class([base_classes, active_classes])
  end
end