defmodule SigmaKit.Components.Charts do
  use Phoenix.LiveComponent

  # prop y_label_format, :string, options: ["dollar", "percent"]
  attr :chart_id, :string, required: true
  attr :options, :map, required: true
  attr :class, :any, default: ""
  attr :autocolor, :boolean, default: false
  attr :canvas_width, :string, default: "100%"
  attr :canvas_height, :string, default: "100%"
  attr :y_label_format, :any, default: nil

  def chart(assigns) do
    ~H"""
    <div
      phx-update="ignore"
      phx-hook="ChartJsHook"
      id={"chart_js_#{Ecto.UUID.generate()}"}
      class={@class}
      data-chart-options={Jason.encode!(@options)}
      data-autocolor={"#{@autocolor}"}
      data-y-label-format={@y_label_format}
      data-event={@chart_id}
    >
      <canvas style={"height: #{@canvas_height} !important; width: #{@canvas_width} !important;"}>
      </canvas>
    </div>
    """
  end

  attr :chart_id, :string, required: true
  attr :class, :any, default: ""
  attr :canvas_width, :string, default: "100%"
  attr :canvas_height, :string, default: "100%"
  attr :rest, :global

  def bar_chart(assigns) do
    ~H"""
    <.chart
      canvas_width={@canvas_width}
      canvas_height={@canvas_height}
      chart_id={@chart_id}
      class={@class}
      options={build_options("bar", @rest)}
    />
    """
  end

  attr :chart_id, :string, required: true
  attr :class, :any, default: ""
  attr :rest, :global
  attr :canvas_width, :string, default: "100%"
  attr :canvas_height, :string, default: "100%"

  def line_chart(assigns) do
    ~H"""
    <.chart
      canvas_width={@canvas_width}
      canvas_height={@canvas_height}
      chart_id={@chart_id}
      class={@class}
      options={build_options("line", @rest)}
    />
    """
  end

  attr :chart_id, :string, required: true
  attr :class, :any, default: ""
  attr :canvas_width, :string, default: "100%"
  attr :canvas_height, :string, default: "100%"
  attr :rest, :global

  def pie_chart(assigns) do
    ~H"""
    <.chart
      canvas_width={@canvas_width}
      canvas_height={@canvas_height}
      chart_id={@chart_id}
      class={@class}
      options={build_options("pie", @rest, grid: false, legend: true)}
    />
    """
  end

  attr :chart_id, :string, required: true
  attr :class, :any, default: ""
  attr :canvas_width, :string, default: "100%"
  attr :canvas_height, :string, default: "100%"
  attr :rest, :global

  def scatter_chart(assigns) do
    ~H"""
    <.chart
      canvas_width={@canvas_width}
      canvas_height={@canvas_height}
      chart_id={@chart_id}
      class={@class}
      options={build_options("scatter", @rest)}
    />
    """
  end

  attr :chart_id, :string, required: true
  attr :class, :any, default: ""
  attr :canvas_width, :string, default: "100%"
  attr :canvas_height, :string, default: "100%"
  attr :rest, :global

  def bubble_chart(assigns) do
    ~H"""
    <.chart
      canvas_width={@canvas_width}
      canvas_height={@canvas_height}
      chart_id={@chart_id}
      class={@class}
      options={build_options("bubble", @rest)}
    />
    """
  end

  defp build_options(type, opts, defaults \\ []) do
    opts = Enum.into(defaults, opts)
    grid = Map.get(opts, :grid, true)
    legend = Map.get(opts, :legend, false)

    %{
      type: type,
      options: %{
        animation: false,
        maintainAspectRatio: false,
        responsive: true,
        tension: 0.4,
        pointRadius: 1,
        scales: %{
          y: %{
            border: %{
              display: false
            },
            grid: %{
              display: grid,
              drawBorder: grid,
              drawTicks: grid
            },
            ticks: %{
              display: grid
            }
          },
          x: %{
            type: "timeseries",
            border: %{
              display: false
            },
            grid: %{
              display: grid,
              drawBorder: grid
            },
            ticks: %{
              display: grid
            }
          }
        },
        plugins: %{
          legend: %{
            display: legend
          }
        },
        interaction: %{
          intersect: false,
          mode: "nearest"
        }
      }
    }
  end
end