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

const curDay = 3;

export default function JumperExample() {
  const [day, setDay] = useState(1);
  const maxDay = 5;

  let prevDisabled = false;
  let nextDisabled = false;
  let prevTitle = "前一天";
  let nextTitle = "后一天";
  const curTitle = "今天";

  if (day === 1) {
    prevDisabled = true;
    prevTitle = "当前在第一天";
  } else if (day === maxDay) {
    nextDisabled = true;
    nextTitle = "当前在最后一天";
  }

  const jumperProps = {
    prevDisabled,
    nextDisabled,
    prevTitle,
    nextTitle,
    curTitle,
    isCurrent: day === curDay,
    onNext: () => setDay(day + 1),
    onPrev: () => setDay(day - 1),
    onCurrent: () => setDay(curDay),
  };

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

  return (
    <>
      <Jumper
        showCurrent
        direction={updown ? "updown" : "leftright"}
        noBordered={noBordered}
        {...jumperProps}
      />
      <p>
        当前正在查看第 {day}/{maxDay} 天
      </p>
      <section>
        <Switch value={updown} onChange={value => setUpdown(value)}>
          使用上下箭头
        </Switch>
        <Switch value={noBordered} onChange={value => setNoBordered(value)}>
          无边框样式
        </Switch>
      </section>
    </>
  );
}