// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { useId } from "@coreai-ds/react-components";
import * as React from 'react';
import type { SliderProps } from "@coreai-ds/react-components";
import { Label } from "@coreai-ds/react-components";
import { Slider } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";

export const Controlled = (): JSXElement => {
    const id = useId();
    const [sliderValue, setSliderValue] = React.useState(160);
    const onSliderChange: SliderProps['onChange'] = (_, data) => setSliderValue(data.value);
    const resetSlider = () => setSliderValue(0);
    return (<>
      <Label htmlFor={id}>Control Slider [ Current Value: {sliderValue} ]</Label>
      <Slider aria-valuetext={`Value is ${sliderValue}`} value={sliderValue} min={20} max={200} onChange={onSliderChange} id={id}/>
      <Button onClick={resetSlider}>Reset</Button>
    </>);
};

export default Controlled;