// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import * as React from 'react';

import { ProgressBar } from './ProgressBar.dom.tsx';
import type { ComponentMeta } from '../storybook/types.std.ts';

type Props = React.ComponentProps<typeof ProgressBar>;
export default {
  title: 'Components/ProgressBar',
  component: ProgressBar,
  args: {
    fractionComplete: 0,
    isRTL: false,
  },
} satisfies ComponentMeta<Props>;

export function Spinning(args: Props): React.JSX.Element {
  return <ProgressBar {...args} fractionComplete={null} />;
}
export function Zero(args: Props): React.JSX.Element {
  return <ProgressBar {...args} />;
}

export function Thirty(args: Props): React.JSX.Element {
  return <ProgressBar {...args} fractionComplete={0.3} />;
}

export function Done(args: Props): React.JSX.Element {
  return <ProgressBar {...args} fractionComplete={1} />;
}

export function Increasing(args: Props): React.JSX.Element {
  const fractionComplete = useIncreasingFractionComplete();
  return <ProgressBar {...args} fractionComplete={fractionComplete} />;
}

export function RTLIncreasing(args: Props): React.JSX.Element {
  const fractionComplete = useIncreasingFractionComplete();
  return <ProgressBar {...args} fractionComplete={fractionComplete} isRTL />;
}

function useIncreasingFractionComplete() {
  const [fractionComplete, setFractionComplete] = React.useState(0);
  React.useEffect(() => {
    if (fractionComplete >= 1) {
      return;
    }
    const timeout = setTimeout(() => {
      setFractionComplete(cur => Math.min(1, cur + 0.1));
    }, 300);
    return () => clearTimeout(timeout);
  }, [fractionComplete]);
  return fractionComplete;
}
