// node modules
import React from "react";
import { createUseStyles } from "react-jss";
import { Meta, Story } from "@storybook/react";

// local components
import { AnimationWrapper } from "../components/animation_wrapper";
import { SelectButton } from "../components/buttons/select_button";

export default {
    title: 'Example/Animation',
} as Meta;

const useStyles = createUseStyles({
   btn: { width: '100%', marginBottom: '10px' }
});

const AnimationTpl: Story<any> = () => {
    const { btn } = useStyles();

    return (
        <div style={{ width: 300, margin: '0 auto', paddingTop: 50 }}>
            Opacity Animated
            <AnimationWrapper type="opacity" delay={0} timeout={1000}>
                <SelectButton className={btn} label="First Button" />
            </AnimationWrapper>

            Opacity Animated Disabled
            <AnimationWrapper disabled type="opacity" delay={0} timeout={1000}>
                <SelectButton className={btn} label="First Button" />
            </AnimationWrapper>

            Transition Animated
            <AnimationWrapper delay={50} timeout={800}>
                <SelectButton className={btn} label="First Button" />
            </AnimationWrapper>
            <AnimationWrapper delay={300} timeout={800}>
                <SelectButton className={btn} label="First Button" />
            </AnimationWrapper>
            <AnimationWrapper delay={550} timeout={800}>
                <SelectButton className={btn} label="First Button" />
            </AnimationWrapper>
        </div>
    )
}

export const animation = AnimationTpl.bind({});
