import { moduleMetadata } from '@storybook/angular';
import { MosRangeSliderComponent } from './mos-range-slider.component';
import { gradeColors } from '../../../styles/colors';

export default {
    title: 'Input/Gradient Range Slider',
    component: MosRangeSliderComponent,
    args: {
        range: [0, 5],
        pipValues: [],
        colors: [gradeColors.bad, gradeColors.poor, gradeColors.fair, gradeColors.good, gradeColors.excellent],
        step: 0.1,
        formatting: {
            to: (value: number) => value.toFixed(1),
            from: (formattedValue: string) => Number(formattedValue)
        }
    }
};

const Template = (args: MosRangeSliderComponent) => ({
    component: MosRangeSliderComponent,
    props: args,
    decorators: [
        moduleMetadata({
            declarations: [],
            imports: []
        }),
    ]
});

//   _____ _             _
//  / ____| |           (_)
// | (___ | |_ ___  _ __ _  ___  ___
//  \___ \| __/ _ \| '__| |/ _ \/ __|
//  ____) | || (_) | |  | |  __/\__ \
// |_____/ \__\___/|_|  |_|\___||___/


export const Primary = Template.bind({});
Primary.args = {

}

export const FullPips = Template.bind({});
FullPips.args = {
    pipValues: [0, 1, 2, 3, 4, 5]
}

export const DifferentColors = Template.bind({});
DifferentColors.args = {
    range: [0, 100],
    colors: ['#40E0D0', '#FF8C00', '#FF0080']
}