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

import type { JSXElement } from "@coreai-ds/react-components";
import { Field } from "@coreai-ds/react-components";
import { ProgressBar } from "@coreai-ds/react-components";
import { createMotionComponent } from "@coreai-ds/react-components";
import * as React from 'react';

// A custom motion component that swings between left and right, instead of always moving to the right.
// The reduced motion version of the animation moves more slowly, with no acceleration, using a gentler gradient.
const SwingMotion = createMotionComponent({
    // translate percentages are relative to the element's own width, not the container's.
    // The indeterminate bar is ~33% the width of its container, so:
    //   translate: '-100%' === left: '-33%' (one bar-width off-screen to the left)
    //   translate: '300%'  === left: '100%' (3 × bar-width ≈ full container width, off-screen to the right)
    keyframes: [{ translate: '-100%' }, { translate: '300%' }],
    duration: 2000,
    easing: 'ease-in-out',
    direction: 'alternate', // loop by reversing direction
    iterations: Infinity,
    reducedMotion: {
        // The gradient bar is 100% of the container for reduced motion, which is 3x wider
        keyframes: [{ translate: '-100%' }, { translate: '100%' }],
        duration: 6000, // slower speed
        easing: 'linear', // no acceleration
    },
});

export const MotionCustom = (): JSXElement => (<Field validationMessage="Custom indeterminate animation" validationState="none">
    <ProgressBar indeterminateMotion={{
        children: (_, motionProps) => <SwingMotion {...motionProps}/>,
    }}/>
  </Field>);

export default MotionCustom;