import React, { useState } from "react";
import { Slider, InputNumber, InputAdornment } from "@tencent/tea-component";

const marks = [{ value: 0 }, { value: 20 }, { value: 50 }, { value: 100 }];

export default function SliderExample() {
  const [value1, setValue1] = useState(20);
  const [value2, setValue2] = useState(50);

  return (
    <>
      <h3>基本用法</h3>
      <section>
        <Slider
          min={0}
          max={100}
          marks={marks}
          onChange={value => console.log("onChange", value)}
          onUpdate={value => console.log("onUpdate", value)}
        />
      </section>

      <h3>双滑块</h3>
      <section>
        <Slider
          rangeMode
          min={0}
          max={100}
          marks={marks}
          defaultValue={[10, 50]}
          onChange={value => console.log("onChange", value)}
          onUpdate={value => console.log("onUpdate", value)}
        />
      </section>

      <h3>受控组件</h3>
      <section>
        <Slider
          min={0}
          max={100}
          marks={marks}
          value={value1}
          onChange={value => {
            // onChange 的时候不更新值，则会一直使用传入的 value
            // setValue1(value);
            console.log("onChange", value);
          }}
          onUpdate={value => console.log("onUpdate", value)}
          after={
            <InputNumber
              min={0}
              max={100}
              value={value1}
              onChange={value => setValue1(value)}
            />
          }
        />
      </section>

      <h3>格式化提示</h3>
      <section>
        <Slider
          min={0}
          max={100}
          tipFormatter={value => `${value} 台`}
          marks={marks.map(({ value }) => ({ value, label: `${value} 台` }))}
          value={value2}
          onChange={value => {
            setValue2(value);
            console.log(value);
          }}
          after={
            <InputAdornment after="台" appearance="pure">
              <InputNumber
                min={0}
                max={100}
                step={5}
                value={value2}
                onChange={value => setValue2(value)}
              />
            </InputAdornment>
          }
        />
      </section>

      <h3>滑轨提示</h3>
      <section>
        <Slider
          min={0}
          max={100}
          marks={marks}
          defaultValue={0}
          enableTrackTip
        />
      </section>

      <h3>可拖动范围</h3>
      <section>
        <Slider
          min={0}
          max={100}
          range={[20, 90]}
          marks={marks}
          onChange={value => console.log("onChange", value)}
          onUpdate={value => console.log("onUpdate", value)}
        />
      </section>

      <h3>步长调整</h3>
      <section>
        <Slider
          min={0}
          max={100}
          step={5}
          marks={marks}
          defaultValue={20}
          onChange={value => console.log(value)}
        />
      </section>

      <h3>只能移动至刻度</h3>
      <section>
        <Slider
          min={0}
          max={100}
          step={5}
          marks={marks}
          markValueOnly
          defaultValue={50}
          onChange={value => console.log(value)}
        />
      </section>
      <h3>禁用</h3>
      <section>
        <Slider disabled min={0} max={100} marks={marks} defaultValue={50} />
      </section>

      <h3>垂直方向</h3>
      <section>
        <Slider vertical min={0} max={100} marks={marks} defaultValue={20} />
        <Slider
          vertical
          rangeMode
          min={0}
          max={100}
          marks={marks}
          defaultValue={[10, 50]}
        />
        <Slider
          vertical
          disabled
          min={0}
          max={100}
          marks={marks}
          defaultValue={10}
        />
      </section>
    </>
  );
}