/* eslint-disable import/no-deprecated -- This example documents the deprecated
 * ProgressBar component until it is removed or shimmed. */
import React, { useState } from "react";
import {
  Button,
  Content,
  Heading,
  ProgressBar,
} from "@jobber/components-native";
import type { ProgressBarProps } from "@jobber/components-native";

type ProgressBarStoryArgs = Partial<
  Pick<
    ProgressBarProps,
    "current" | "total" | "inProgress" | "variation" | "size"
  >
>;

export function ProgressBarWithHeader(props: ProgressBarStoryArgs) {
  const [step, setStep] = useState(1);
  const totalSteps = 6;

  return (
    <ProgressBar
      current={step}
      inProgress={props.inProgress}
      size={props.size}
      total={totalSteps}
      variation={props.variation}
      header={
        <>
          <Content>
            <Heading level="heading">Upload progress</Heading>
          </Content>
          <Button
            label="Step Back"
            onPress={() => setStep(Math.max(0, step - 1))}
          />
          <Button
            label="Step Forward"
            onPress={() => setStep(Math.min(totalSteps, step + 1))}
          />
        </>
      }
    />
  );
}