import { styled } from "styled-components";
import Pagination from "rc-pagination";
import useTranslation from "../../hooks/useTranslation";
import wordStore from "../../mc/wordStore.json";

/**
 *
 * @param {object} props
 * @param {number} props.current - Current page
 * @param {number} props.totalPage - The number of items rendered in a page
 * @param {number} props.totalItem -The complete total number of item
 * @param {Function} props.onChange - A function that set the current page
 * @param {boolean} props.hideOnSinglePage - A function that set the current page
 * @param {React.CSSProperties} props.style
 * @returns {JSX.Element}
 */
const Paginate = ({
  current,
  totalPage,
  totalItem,
  onChange,
  style,
  hideOnSinglePage,
}) => {
  const { findText } = useTranslation(wordStore);
  return (
    <Container style={style}>
      <Pagination
        onChange={onChange}
        current={current}
        total={totalItem}
        pageSize={totalPage || 1}
        nextIcon={() => findText("Next")}
        prevIcon={() => findText("Prev")}
        jumpNextIcon={() => <More />}
        showLessItems
        jumpPrevIcon={() => <More />}
        hideOnSinglePage={hideOnSinglePage}
        locale={{ next_page: "Next page", prev_page: "Previous page" }}
      />
    </Container>
  );
};

const More = () => {
  return (
    <svg
      width="11"
      height="4"
      viewBox="0 0 11 4"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M1.86 3.09C1.54 3.09 1.275 2.985 1.065 2.775C0.855 2.555 0.75 2.285 0.75 1.965C0.75 1.645 0.855 1.38 1.065 1.17C1.275 0.95 1.54 0.84 1.86 0.84C2.18 0.84 2.445 0.95 2.655 1.17C2.865 1.38 2.97 1.645 2.97 1.965C2.97 2.285 2.865 2.555 2.655 2.775C2.445 2.985 2.18 3.09 1.86 3.09ZM5.5807 3.09C5.2607 3.09 4.9957 2.985 4.7857 2.775C4.5757 2.555 4.4707 2.285 4.4707 1.965C4.4707 1.645 4.5757 1.38 4.7857 1.17C4.9957 0.95 5.2607 0.84 5.5807 0.84C5.9007 0.84 6.1657 0.95 6.3757 1.17C6.5857 1.38 6.6907 1.645 6.6907 1.965C6.6907 2.285 6.5857 2.555 6.3757 2.775C6.1657 2.985 5.9007 3.09 5.5807 3.09ZM9.30141 3.09C8.98141 3.09 8.71641 2.985 8.50641 2.775C8.29641 2.555 8.19141 2.285 8.19141 1.965C8.19141 1.645 8.29641 1.38 8.50641 1.17C8.71641 0.95 8.98141 0.84 9.30141 0.84C9.62141 0.84 9.88641 0.95 10.0964 1.17C10.3064 1.38 10.4114 1.645 10.4114 1.965C10.4114 2.285 10.3064 2.555 10.0964 2.775C9.88641 2.985 9.62141 3.09 9.30141 3.09Z"
        fill="black"
      />
    </svg>
  );
};

export default Paginate;

export const Container = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
  ul {
    display: flex;
    list-style: none;
    gap: 17px;
    li {
      cursor: pointer;
      display: flex;
      width: 40px;
      height: 40px;
      justify-content: center;
      align-items: center;
      border-radius: 50px;
      border: 1px solid #dfe5e5;
      background: #f5f7f7;
      font-size: 15px;
      font-weight: 700;
      color: #4a4d4d;

      &.rc-pagination-prev,
      &.rc-pagination-next {
        min-width: 76px;
        width: auto;
        white-space: nowrap;
        padding: 0 8px;
      }
      &.rc-pagination-item-active {
        background: #febf10;
        a {
          color: #fff;
        }
      }
      &.rc-pagination-jump-next,
      &.rc-pagination-jump-prev {
        background: transparent;
        width: 12px;
        border: none;
        font-size: 15px;
        font-weight: 700;
      }
      &.rc-pagination-disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      &.rc-pagination-options {
        display: none;
      }
    }
  }
`;
