defmodule LiveAntd.Components.Pagination do
  @moduledoc """
  A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.

  ## API

  * [x] `current`:	Current page number
  * [x] `defaultCurrent`:	Default initial page number
  * [ ] `defaultPageSize`:	Default number of data items per page
  * [ ] `disabled`:	Disable pagination
  * [ ] `hideOnSinglePage` Whether to hide pager on single page
  * [ ] `itemRender`	To customize item's innerHTML
  * [x] `pageSize`:	Number of data items per page
  * [ ] `pageSizeOptions`:	Specify the sizeChanger options
  * [ ] `responsive`:	If size is not specified, Pagination would resize according to the width of the window
  * [ ] `showLessItems`:	Show less page items
  * [ ] `showQuickJumper`:	Determine whether you can jump to pages directly
  * [ ] `showSizeChanger`:	Determine whether to show pageSize select, it will be true
  * [ ] `showTitle`:	Show page item's title
  * [x] `showTotal`:	To display the total number and range
  * [ ] `simple`:	Whether to use simple mode	boolean	-
  * [ ] `size`:	Specify the size of Pagination, can be set to small
  * [x] `total`:	Total number of data items
  * [x] `onChange`:	Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments
  * [ ] `onShowSizeChange`:	Called when pageSize is changed

  ## Example

    current_page: 1,
    next_page: nil,
    per_page: 10,
    prev_page: nil,
    total_count: 0,
    totalPages: 0

    <Pagination
      size={}
      defaultCurrent={1}
      total={50}
      current={}
      pageSize={}
      onChange={}
    />

  """

  use Surface.Component

  # prop defaultCurrent, :string, required: true
  prop(showTotal, :boolean, default: true)
  prop(size, :string)
  prop(current, :integer, default: 1)
  prop(total, :integer)
  # prop pageSize, :integer
  prop(onChange, :event)
  prop(totalPages, :integer, required: true, default: 0)

  def render(assigns) do
    ~H"""
    <ul class="ant-pagination" :if={{ @totalPages > 1 }}>
      <li class="ant-pagination-total-text">总共 {{ @total }} 记录</li>
      <li
        :on-click={{ @onChange }}
        phx-value-page_number={{ @current - 1 }}
        title="上一页"
        class={{
          "ant-pagination-prev",
          "ant-pagination-disabled": @current == 1
        }}
      ><button
          class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left"
            class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em"
              height="1em" fill="currentColor" aria-hidden="true">
              <path
                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z">
              </path>
            </svg></span>
        </button>
      </li>

      <li
        :for.index={{ index <- Enum.to_list(1..@totalPages) }}
        title={{index + 1}}
        :on-click={{ @onChange }}
        phx-value-page_number={{ index+1 }}
        class={{
          "ant-pagination-item",
          "ant-pagination-item-active": current_page(index+1, @current)
        }}
      >
        <a rel="nofollow">{{ index + 1 }}</a>
      </li>

      <li
        title="下一页"
        tabindex="0"
        :on-click={{ @onChange }}
        phx-value-page_number={{ @current + 1 }}
        class={{
          "ant-pagination-next",
          "ant-pagination-disabled": @current == @totalPages
        }}
      >
        <button
          class="ant-pagination-item-link" type="button" tabindex="-1"><span role="img" aria-label="right"
            class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em"
              height="1em" fill="currentColor" aria-hidden="true">
              <path
                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z">
              </path>
            </svg></span>
        </button>
      </li>
    </ul>
    """
  end

  def render_prev_page(assigns) do
  end

  def render_next_page(assigns) do
  end

  defp current_page(index, current), do: index == current
end