pageNation

type PageNation = {
  setPageNum: React.Dispatch<React.SetStateAction<number>>
  pageNum: number
  onclick: (e: React.MouseEvent) => void
  num: number
}

import React, { ReactNode, useEffect, useState } from 'react'
import LeftArrow from 'src/assets/icon/common/ico_arrow_left.svg'
import RightArrow from 'src/assets/icon/common/ico_arrow_right.svg'
import { FilterHandleBtnList } from 'src/styles/common'
import styled from 'styled-components'

const PageNation = ({ setPageNum, pageNum, onclick, num }: PageNation) => {
  //보여줄 페이지네이션 5개까지 담는 state
  const [pageNationNum, setPageNationNum] = useState<ReactNode[]>([]) //총 페이지네이션을 담는 state
  const [totalList, setTotalList] = useState<ReactNode[]>([])

  useEffect(() => {
    const makePageNation = (num: number) => {
      const result = []
      //props로 받은 num 숫자만큼 for문 돌려서 배열을 만들어줌
      for (let i = 1; i <= num; i++) {
        result.push(i)
      }
      setTotalList(result)
    }

    makePageNation(num)
  }, [])

  //선택한 페이지
  const buttonHandler = (type: string) => {
    switch (type) {
      case 'prev':
        setPageNum((active: number) => (active > 1 ? active - 1 : 1))
        return
      case 'next':
        setPageNum((active: number) => (active > 0 ? active + 1 : 1))
        return
    }
  }

  useEffect(() => {
    //pageNum이 5 미만이면 totalList 1~5까지 잘라줌
    if (pageNum < 5) {
      setPageNationNum(totalList.slice(0, 5))
    } else if (pageNum > 5 && pageNum > Number(pageNationNum[pageNationNum.length - 1])) {
      //pageNum이 pageNationNum의 마지막 숫자보다 크면 다음장으로 넘겨줌
      setPageNationNum(totalList.slice(pageNum - 1, pageNum + 4))
      return
    } else if (pageNum > 4 && pageNum < Number(pageNationNum[0])) {
      //pageNum이 pageNationNum의 첫번째 숫자보다 작으면 이전장으로 넘겨줌
      setPageNationNum(totalList.slice(pageNum - 5, pageNum))
    }
  }, [pageNum, totalList])

  return (
    <>
      <FilterHandleBtnList>
        <button
          onClick={() => buttonHandler('prev')}
          disabled={1 === pageNum}
          style={1 === pageNum ? { cursor: 'auto' } : { cursor: 'pointer' }}
        >
          <LeftArrow />
        </button>
        {pageNationNum.map((i) => (
          <PageNationBtn
            key={i}
            isActive={pageNum === i}
            onClick={(event: React.MouseEvent) =>
              setPageNum(Number((event.target as HTMLLIElement).innerText))
            }
          >
            <button onClick={(e) => onclick(e)}>{i}</button>
          </PageNationBtn>
        ))}
        <button
          onClick={() => buttonHandler('next')}
          disabled={num === pageNum} //마지막 숫자이면 disabled
          style={num === pageNum ? { cursor: 'auto' } : { cursor: 'pointer' }}
        >
          <RightArrow />
        </button>
      </FilterHandleBtnList>
    </>
  )
}

const PageNationBtn = styled.div<{ isActive: boolean }>`
  background-color: ${({ isActive }) => (isActive ? '#0066FE' : 'inherit')};
  border-radius: 50px;
  padding: 2px;
  height: 30px;
  width: 30px;
  text-align: center;

  button {
    color: ${({ isActive }) => (isActive ? 'white' : '#999999')};
    font-family: Spartan;
  }
`

export default PageNation