mishka_chelekom

defmodule <%= @module %> do
  @moduledoc """
  The `<%= @module %>` module provides a reusable component for displaying skeleton
  loaders in a Phoenix LiveView application. Skeleton loaders serve as placeholders to indicate
  that content is currently loading or being processed, improving the user experience by offering
  a visual cue in place of the final content.

  ## Features

  - **Size Options:** Multiple size options for both height and width, including
  `extra_small`, `small`, `medium`, `large`, and `extra_large`. The width can also be set to
  `full` to occupy the entire container.
  - **Rounded Corners:** Configurable border radius with options for different sizes, as
  well as `full` and `none` for complete circular shapes or no rounding at all.
  - **Color Themes:** Various color options to match the design of the application, such as `white`,
  `silver`, `primary`, `secondary`, `success`, `warning`, `danger`, `info`, `misc`, `dawn`, `light`, and `dark`.
  - **Visibility Control:** The component's visibility can be toggled with the `visible` attribute,
  allowing for dynamic control over when the skeleton is displayed.
  - **Custom Animation:** The `animated` global attribute can be used to enable or disable a
  pulsating animation effect, giving the skeleton loader a dynamic appearance.

  This component is ideal for providing visual feedback during data fetching or other asynchronous
  operations, making the UI more responsive and engaging for users.
  """

  use Phoenix.Component
  use Gettext, backend: <%= inspect(@web_module) %>.Gettext

  @doc """
  Renders a `skeleton` loader component to indicate loading state in your application.
  The skeleton component provides customizable options such as size, color, and rounded corners.

  You can also add animations to create a more engaging user experience.

  ## Examples

  ```elixir
  <div class="p-5 space-y-5">
    <.skeleton animated />
    <.skeleton height="h-[20px]" width="w-[150px]" />
    <.skeleton animated height="h-[40px]" width="large" color="bg-rose-400" />
    <.skeleton width="large" height="small" color="bg-rose-400" />
    <.skeleton width="w-10" height="h-10" color="bg-green-400" rounded="full"/>
  </div>
  ```
  """
  @doc type: :component
  attr :id, :string,
    default: nil,
    doc: "A unique identifier is used to manage state and interaction"

  attr :class, :string, default: nil, doc: "Custom CSS class for additional styling"
  attr :color, :string, default: "base", doc: "Determines color theme"
  attr :height, :string, default: "extra_small", doc: "Determines the element width"
  attr :width, :string, default: "full", doc: "Determines the element width"
  attr :rounded, :string, default: "small", doc: "Determines the border radius"

  attr :visible, :boolean, default: true, doc: ""

  attr :rest, :global,
    include: ~w(animated),
    doc:
      "Global attributes can define defaults which are merged with attributes provided by the caller"

  def skeleton(assigns) do
    ~H"""
    <div
      :if={@visible}
      role="status"
      aria-live="polite"
      aria-busy="true"
      id={@id}
      class={[
        rounded_size(@rounded),
        width_class(@width),
        height_class(@height),
        color_class(@color),
        @rest[:animated] && "animate-pulse",
        @class
      ]}
      {@rest}
    >
      <span class="sr-only">{gettext("Loading...")}</span>
    </div>
    """
  end

  <%= if is_nil(@rounded) or "extra_small" in @rounded do %>
  defp rounded_size("extra_small"), do: "rounded-sm"
  <% end %>
  <%= if is_nil(@rounded) or "small" in @rounded do %>
  defp rounded_size("small"), do: "rounded"
  <% end %>
  <%= if is_nil(@rounded) or "medium" in @rounded do %>
  defp rounded_size("medium"), do: "rounded-md"
  <% end %>
  <%= if is_nil(@rounded) or "large" in @rounded do %>
  defp rounded_size("large"), do: "rounded-lg"
  <% end %>
  <%= if is_nil(@rounded) or "extra_large" in @rounded do %>
  defp rounded_size("extra_large"), do: "rounded-xl"
  <% end %>
  <%= if is_nil(@rounded) or "full" in @rounded do %>
  defp rounded_size("full"), do: "rounded-full"
  <% end %>
  <%= if is_nil(@rounded) or "none" in @rounded do %>
  defp rounded_size("none"), do: "rounded-none"
  <% end %>
  defp rounded_size(params) when is_binary(params), do: params

  defp height_class("extra_small"), do: "h-1"
  defp height_class("small"), do: "h-2"
  defp height_class("medium"), do: "h-3"
  defp height_class("large"), do: "h-4"
  defp height_class("extra_large"), do: "h-5"
  defp height_class(params) when is_binary(params), do: params

  defp width_class("extra_small"), do: "w-60"
  defp width_class("small"), do: "w-64"
  defp width_class("medium"), do: "w-72"
  defp width_class("large"), do: "w-80"
  defp width_class("extra_large"), do: "w-96"
  defp width_class("full"), do: "w-full"
  defp width_class(params) when is_binary(params), do: params

  <%= if is_nil(@color) or "base" in @color do %>
  defp color_class("base"), do: "bg-[#e4e4e7] dark:bg-[#27272a]"
  <% end %>
  <%= if is_nil(@color) or "white" in @color do %>
  defp color_class("white"), do: "bg-white"
  <% end %>
  <%= if is_nil(@color) or "natural" in @color do %>
  defp color_class("natural"), do: "bg-[#4B4B4B] dark:bg-[#DDDDDD]"
  <% end %>
  <%= if is_nil(@color) or "primary" in @color do %>
  defp color_class("primary"), do: "bg-[#007F8C] dark:bg-[#01B8CA]"
  <% end %>
  <%= if is_nil(@color) or "secondary" in @color do %>
  defp color_class("secondary"), do: "bg-[#266EF1] dark:bg-[#6DAAFB]"
  <% end %>
  <%= if is_nil(@color) or "success" in @color do %>
  defp color_class("success"), do: "bg-[#0E8345] dark:bg-[#06C167]"
  <% end %>
  <%= if is_nil(@color) or "warning" in @color do %>
  defp color_class("warning"), do: "bg-[#CA8D01] dark:bg-[#FDC034]"
  <% end %>
  <%= if is_nil(@color) or "danger" in @color do %>
  defp color_class("danger"), do: "bg-[#DE1135] dark:bg-[#FC7F79]"
  <% end %>
  <%= if is_nil(@color) or "info" in @color do %>
  defp color_class("info"), do:  "bg-[#0B84BA] dark:bg-[#3EB7ED]"
  <% end %>
  <%= if is_nil(@color) or "misc" in @color do %>
  defp color_class("misc"), do: "bg-[#8750C5] dark:bg-[#BA83F9]"
  <% end %>
  <%= if is_nil(@color) or "dawn" in @color do %>
  defp color_class("dawn"), do: "bg-[#A86438] dark:bg-[#DB976B]"
  <% end %>
  <%= if is_nil(@color) or "silver" in @color do %>
  defp color_class("silver"), do: "bg-[#868686] dark:bg-[#A6A6A6]"
  <% end %>
  <%= if is_nil(@color) or "dark" in @color do %>
  defp color_class("dark"), do: "bg-[#282828]"
  <% end %>
  defp color_class(params) when is_binary(params), do: params
end