import React, { useState } from 'react';
import { Slider, SliderThumb } from './react';
const locale = 'nb';
const getNumberFormatter = (locale, opts = {}) => {
    return (value) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0, ...opts }).format(value);
};
export default {
    title: 'Forms/Slider and Range Slider',
    component: Slider,
};
export const Single = {
    render() {
        return (React.createElement(Slider, { label: "Single", min: "0", max: "100" },
            React.createElement(SliderThumb, { name: "value" })));
    },
};
export const Range = {
    render() {
        return (React.createElement(Slider, { label: "Range", min: "0", max: "100" },
            React.createElement(SliderThumb, { name: "from", slot: "from", "aria-label": "From value" }),
            React.createElement(SliderThumb, { name: "to", slot: "to", "aria-label": "To value" })));
    },
};
// Take a suffix attribute on `<Slider>` I think, have `<SliderThumb>` get from that.
export const SuffixSquareMeters = {
    args: {
        suffix: 'm²',
    },
    render({ suffix }) {
        return (React.createElement(Slider, { label: "Apartment size", min: "0", max: "250", suffix: suffix, formatter: getNumberFormatter(locale) },
            React.createElement(SliderThumb, { slot: "from", "aria-label": "From size", name: "from" }),
            React.createElement(SliderThumb, { slot: "to", "aria-label": "To size", name: "to" })));
    },
};
export const SuffixCurrency = {
    args: {
        suffix: 'kr',
    },
    render({ suffix }) {
        return (React.createElement(Slider, { label: "Price", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
            React.createElement(SliderThumb, { slot: "from", "aria-label": "From price", name: "from" }),
            React.createElement(SliderThumb, { slot: "to", "aria-label": "To price", name: "to" })));
    },
};
export const SuffixKilometers = {
    args: {
        suffix: 'km',
    },
    render({ suffix }) {
        return (React.createElement(Slider, { label: "Distance", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
            React.createElement(SliderThumb, { slot: "from", "aria-label": "From distance", name: "from" }),
            React.createElement(SliderThumb, { slot: "to", "aria-label": "To distance", name: "to" })));
    },
};
export const Marks = {
    args: {
        suffix: 'km',
    },
    render({ suffix }) {
        return (React.createElement(React.Fragment, null,
            React.createElement(Slider, { label: "Single", min: "0", max: "100", markers: 5, step: 5 },
                React.createElement(SliderThumb, { name: "value" }))));
    },
};
export const Step = {
    args: {
        step: 5,
    },
    render({ step }) {
        return (React.createElement(Slider, { label: "Single", step: step, min: "0", max: "100" },
            React.createElement(SliderThumb, { name: "value" })));
    },
};
export const OverUnder = {
    render() {
        const [overUnderFrom, setOverUnderFrom] = useState('');
        const [overUnderTo, setOverUnderTo] = useState('');
        return (React.createElement(React.Fragment, null,
            React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
                    const formData = new FormData(val.currentTarget);
                    setOverUnderFrom(formData.get('from'));
                    setOverUnderTo(formData.get('to'));
                } },
                React.createElement(Slider, { label: "Produksjons\u00E5r", min: "1950", max: "2025", "data-testid": "overunder", formatter: (value) => {
                        if (value === '1950') {
                            return 'Før 1950';
                        }
                        if (value === '2025') {
                            return 'Etter 2025';
                        }
                        return value;
                    } },
                    React.createElement(SliderThumb, { slot: "from", "aria-label": "Fra \u00E5r", "aria-description": "1950 inkluderer kj\u00F8ret\u00F8y produsert fram til 1950", name: "from" }),
                    React.createElement(SliderThumb, { slot: "to", "aria-label": "Til \u00E5r", "aria-description": "2025 inkluderer kj\u00F8ret\u00F8y produsert etter 2025", name: "to" }))),
            React.createElement("p", null, "Drag the slider to show the value below. See the Code tab for how to format the labels."),
            React.createElement("output", null,
                React.createElement("dl", null,
                    React.createElement("dt", null, "From:"),
                    React.createElement("dd", { id: "overunder-from" }, overUnderFrom),
                    React.createElement("dt", null, "To:"),
                    React.createElement("dd", { id: "overunder-to" }, overUnderTo)))));
    },
};
export const SingleError = {
    render() {
        return (React.createElement(Slider, { label: "Single", min: "0", max: "100" },
            React.createElement("p", { slot: "description" }, "Try typing a value over 100"),
            React.createElement(SliderThumb, null)));
    },
};
export const RangeError = {
    render() {
        return (React.createElement(Slider, { label: "Production year", min: "1950", max: "2025" },
            React.createElement("p", { slot: "description" }, "Try typing a from value higher than a to value"),
            React.createElement(SliderThumb, { slot: "from", name: "from" }),
            React.createElement(SliderThumb, { slot: "to", name: "to" })));
    },
};
export const TestCase = {
    render() {
        const [fromValue, setFromValue] = useState('0');
        const [toValue, setToValue] = useState('150000');
        return (React.createElement(React.Fragment, null,
            React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
                    const formData = new FormData(val.currentTarget);
                    setFromValue(formData.get('from'));
                    setToValue(formData.get('to'));
                } },
                React.createElement(Slider, { label: "Pris", min: "0", max: "700000" },
                    React.createElement(SliderThumb, { slot: "from", "aria-label": "Fra pris", name: "from", value: fromValue }),
                    React.createElement(SliderThumb, { slot: "to", "aria-label": "Til pris", "aria-description": "700000 inkluderer prisen derfra og opp", name: "to", value: toValue }))),
            React.createElement("p", null, "Drag the slider to show the value below. See the Code tab for how to format the labels."),
            React.createElement("output", null,
                React.createElement("dl", null,
                    React.createElement("dt", null, "From:"),
                    React.createElement("dd", null, fromValue),
                    React.createElement("dt", null, "To:"),
                    React.createElement("dd", null, toValue)))));
    },
};
