import React, { useState } from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { ProgressBar } from "../ui-components/ProgressBar";
import { ProgressBarInfo } from "../ui-components/ProgressBar/ProgressBarInfo";
import { whiteBackground } from "../ui-components/constants";

export default {
  title: "ProgressBar",
  component: ProgressBar,
} as ComponentMeta<typeof ProgressBar>;

const Template: ComponentStory<typeof ProgressBar> = (args) => {
  return (
    <div style={{ background: whiteBackground, padding: 16, borderRadius: 8 }}>
      <ProgressBar {...args} />
    </div>
  );
};

const InfoTemplate: ComponentStory<typeof ProgressBar> = () => {
  const shiftsCompleted = 5;
  const totalShifts = 15;
  const percentCompleted = (shiftsCompleted / totalShifts) * 100;
  return (
    <>
      <ProgressBarInfo />
      <div style={{ background: whiteBackground, padding: 16, borderRadius: 8, marginTop: 16 }}>
        <ProgressBar percent={percentCompleted} />
      </div>
    </>
  );
};

export const ProgressBarInformation = InfoTemplate.bind({});

export const ProgressBarExample = Template.bind({});
ProgressBarExample.args = {
  percent: 50,
};
