import React, { useState } from "react";
import { Jumper, Switch } from "@tencent/tea-component";

export default function JumperExample() {
  const [page, setPage] = useState(1);
  const maxPage = 5;

  let prevDisabled = false;
  let nextDisabled = false;
  let prevTitle = "上一条";
  let nextTitle = "下一条";

  if (page === 1) {
    prevDisabled = true;
    prevTitle = "当前在第一条";
  } else if (page === maxPage) {
    nextDisabled = true;
    nextTitle = "当前在最后一条";
  }

  const jumperProps = {
    prevDisabled,
    nextDisabled,
    prevTitle,
    nextTitle,
    onNext: () => setPage(page + 1),
    onPrev: () => setPage(page - 1),
  };

  const [updown, setUpdown] = useState(false);
  const [noBordered, setNoBordered] = useState(false);

  return (
    <>
      <Jumper
        direction={updown ? "updown" : "leftright"}
        noBordered={noBordered}
        {...jumperProps}
      />
      <p>
        正在查看第 {page}/{maxPage} 条记录
      </p>
      <section>
        <Switch value={updown} onChange={value => setUpdown(value)}>
          使用上下箭头
        </Switch>
        <Switch value={noBordered} onChange={value => setNoBordered(value)}>
          无边框样式
        </Switch>
      </section>
    </>
  );
}