import * as React from "react"
import withTranslate from "jamplay-common/i18n/withTranslate"
import styled from "styled-components"
import _Link from "next/link"
import { ResultLinkComponent } from "jamplay-common/routing"
import bp from "styled-components-breakpoint"
const Link: any = _Link

export type PageInfo = {
  total: number
  currentPage: number
  lastPage: number
}
export interface PaginationPropTypes extends PageInfo, withTranslatePropType {
  onClick?: (page: number) => void
  customLink?: ResultLinkComponent<any>
  customLinkParams?: any
  url?: {
    pathname: string
    query: any
  }
}
const PaginationContainer = styled.div.attrs({
  className: "PaginationContainer"
})`
  display: flex;
  align-items: center;
  a {
    color: ${(props: any) => props.theme.matteBlack};
  }
  border-radius: 5px;
  overflow: hidden;
  background-color: ${(props) => props.theme.matteWhite};
`

const NumberLabel = styled.div.attrs({
  className: `heavent NumberLabel`
})`
  display: inline-block;
  padding: 10px 12px;
  ${bp("mobile")`
    font-size: 1rem;
  `}
  ${bp("tablet")`
    font-size: 1rem;
  `}
  font-weight: bold;
  color: ${(props) => props.theme.matteBlack};
  cursor: pointer;
  &:hover {
    opacity: 0.8;
    background-color: white;
  }
  &.active {
    border-radius: 5px;
    color: white;
    background-color: ${(props: any) => props.theme.pumpkin};
    cursor: default;
    &:hover {
      opacity: 1;
    }
  }
  &.active-point {
    border-radius: 5px;
    color: ${(props) => props.theme.matteBlack};
    cursor: default;
    &:hover {
      opacity: 1;
    }
  }
  &.ellipsis {
    padding: 10px 0px;
  }
  &.disable {
    color: lightgray;
  }
`

export interface LinkPaginationPropTypes
  extends PaginationPropTypes,
    withTranslatePropType {
  pageNumber: any
  bindClickPage: any
  className: any
  innerHtml: string
  aStyle?: any
}

export const LinkPagination: React.SFC<LinkPaginationPropTypes> = (
  props: LinkPaginationPropTypes
) => {
  let { t } = props
  let onClick: any = props.onClick

  if (!t) {
    t = (s) => s
  }

  if (!onClick || typeof onClick !== "function") {
    onClick = (s) => s
  }

  const bindClick = (page) => () => onClick(page)

  if (props.customLink) {
    return (
      <props.customLink
        params={{
          ...props.customLinkParams,
          page: props.pageNumber
        }}
      >
        {props.aStyle ? (
          <a style={props.aStyle}>
            <NumberLabel
              onClick={bindClick(props.bindClickPage)}
              className={props.className}
              dangerouslySetInnerHTML={{ __html: t(props.innerHtml) }}
            />
          </a>
        ) : (
          <a>
            <NumberLabel
              onClick={bindClick(props.bindClickPage)}
              className={props.className}
              dangerouslySetInnerHTML={{ __html: t(props.innerHtml) }}
            />
          </a>
        )}
      </props.customLink>
    )
  } else if (props.url) {
    return (
      <Link
        href={{
          pathname: props.url.pathname,
          query: { ...props.url.query, page: props.pageNumber }
        }}
      >
        {props.aStyle ? (
          <a style={props.aStyle}>
            <NumberLabel
              onClick={bindClick(props.bindClickPage)}
              className={props.className}
              dangerouslySetInnerHTML={{ __html: t(props.innerHtml) }}
            />
          </a>
        ) : (
          <a>
            <NumberLabel
              onClick={bindClick(props.bindClickPage)}
              className={props.className}
              dangerouslySetInnerHTML={{ __html: t(props.innerHtml) }}
            />
          </a>
        )}
      </Link>
    )
  } else {
    return <div />
  }
}

export const Pagination: React.SFC<PaginationPropTypes> = (
  props: PaginationPropTypes
) => {
  if (
    props.lastPage <= 1 ||
    (props.currentPage < 1 || props.currentPage > props.lastPage)
  ) {
    return <div className="Pagination--no-need-to-display" />
  }

  if (props.customLink && props.url) {
    console.warn(
      "ถ้าส่งมาทั้ง url และ customLink จะใช้ customLink เป็นหลัก เอา url ออกได้เลยนะ"
    )
  }

  if (!props.customLink && !props.url) {
    throw new Error("ถ้าไม่ส่ง customLink มาจะต้องส่ง url มานะจ้ะ")
  }

  let { t } = props
  let onClick: any = props.onClick

  if (!t) {
    t = (s) => s
  }

  if (!onClick || typeof onClick !== "function") {
    onClick = (s) => s
  }

  const pagesNumber: any[] = []
  pagesNumber.push(
      <LinkPagination
        {...props}
        aStyle={props.currentPage !== 1 ? null : { textDecoration: "none" , pointerEvents: "none" }}
        key={"back"}
        pageNumber={props.currentPage !== 1 ? props.currentPage - 1 : props.currentPage}
        bindClickPage={1}
        className={props.currentPage !== 1 ? "active-point" : "disable"}
        innerHtml="<"
      />
    )
  if (props.currentPage - 3 < 1) {
    for (let i = props.currentPage - 3; i < props.currentPage + 2; i++) {
      if (i < props.lastPage && i >= 1) {
        const currentPageclassName = props.currentPage === i ? "active" : ""
        pagesNumber.push(
          <LinkPagination
            key={i}
            {...props}
            pageNumber={i}
            bindClickPage={i}
            className={currentPageclassName}
            innerHtml={`${i}`}
          />
        )
      }
    }
  } else {
    pagesNumber.push(
      <LinkPagination
        key={1}
        {...props}
        pageNumber={1}
        bindClickPage={1}
        className="heavent"
        innerHtml={`1`}
      />
    )
    if (props.currentPage - 2 === 2) {
      for (let i = props.currentPage - 2; i < props.currentPage - 1; i++) {
        if (i < props.lastPage && i >= 1) {
          const pageClassName = `${props.currentPage === i ? "active" : ""}`
          pagesNumber.push(
            <LinkPagination
              key={i}
              {...props}
              pageNumber={i}
              bindClickPage={i}
              className={pageClassName}
              innerHtml={`${i}`}
            />
          )
        }
      }
    } else {
      pagesNumber.push(
        <NumberLabel
          key={"...."}
          className="ellipsis"
          dangerouslySetInnerHTML={{ __html: "..." }}
        />
      )
    }

    for (let i = props.currentPage - 1; i < props.currentPage + 2; i++) {
      if (i < props.lastPage && i >= 1) {
        const pageClassName = `${props.currentPage === i ? "active" : ""}`
        pagesNumber.push(
          <LinkPagination
            key={i}
            {...props}
            pageNumber={i}
            bindClickPage={i}
            className={pageClassName}
            innerHtml={`${i}`}
          />
        )
      }
    }
  }

  if (props.currentPage < props.lastPage - 2) {
    if (props.lastPage - props.currentPage === 3) {
      for (let i = props.currentPage + 2; i < props.lastPage; i++) {
        if (i < props.lastPage && i >= 1) {
          pagesNumber.push(
            <LinkPagination
              key={i}
              {...props}
              pageNumber={i}
              bindClickPage={i}
              className=""
              innerHtml={`${i}`}
            />
          )
        }
      }
    } else {
      pagesNumber.push(
        <NumberLabel
          key={"......"}
          className="ellipsis"
          dangerouslySetInnerHTML={{ __html: "..." }}
        />
      )
    }
  }

  const className = props.currentPage === props.lastPage ? "active" : ""
  pagesNumber.push(
    <LinkPagination
      key={"latest"}
      {...props}
      pageNumber={props.lastPage}
      bindClickPage={props.lastPage}
      className={className}
      innerHtml={`${props.lastPage}`}
    />
  )

  pagesNumber.push(
      <LinkPagination
        key={"next"}
        aStyle={props.currentPage !== props.lastPage ?  null : { pointerEvents: "none" }}
        {...props}
        pageNumber={props.currentPage !== props.lastPage ? props.currentPage + 1 : props.currentPage}
        bindClickPage={props.currentPage + 1}
        className={props.currentPage !== props.lastPage ?  "active-point" : "disable"}
        innerHtml={">"}
      />
  )
  return <PaginationContainer>{pagesNumber}</PaginationContainer>
}

export default withTranslate(Pagination) as React.StatelessComponent<
  PaginationPropTypes
>