import { Story, Meta } from "@storybook/react";

import { ProgressRingProps } from "./ProgressRing";
import ProgressRing from ".";
import Block from "../../atoms/Block";

export default {
  title: "Component/Atoms/ProgressRing",
  component: ProgressRing,
  parameters: {
    component: ProgressRing,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const Template: Story<ProgressRingProps> = (args) => (
  <ProgressRing {...args}></ProgressRing>
);

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = { progress: 74, className: "text-3xl" };

export const Progress = Example.bind({});
Progress.args = {
  children: (
    <>
      <ProgressRing progress={0} />
      <ProgressRing progress={25} />
      <ProgressRing progress={75} />
      <ProgressRing progress={95} />
    </>
  ),
  classes: "w-full ",
};

export const Sizes = Example.bind({});
Sizes.args = {
  children: (
    <>
      <ProgressRing
        progress={0}
        borderWidth={2}
        radius={24}
        className="text-sm"
      />
      <ProgressRing
        borderWidth={2}
        progress={25}
        radius={36}
        className="text-lg"
      />
      <ProgressRing
        progress={50}
        borderWidth={3}
        radius={48}
        className="text-lg"
      />
      <ProgressRing progress={75} className="text-3xl" />
      <ProgressRing
        progress={95}
        borderWidth={6}
        radius={80}
        className="text-5xl"
      />
    </>
  ),
  classes: "w-full space-x-6",
};

export const Colors = Example.bind({});
Colors.args = {
  children: (
    <>
      <ProgressRing
        progress={10}
        color={{ text: "text-indigo-700", ring: "text-indigo-A700" }}
      />
      <ProgressRing
        progress={25}
        color={{ text: "text-purple-700", ring: "text-purple-A700" }}
      />
      <ProgressRing
        progress={50}
        color={{ text: "text-red-700", ring: "text-red-A700" }}
      />
      <ProgressRing
        progress={70}
        color={{ text: "text-green-700", ring: "text-green-A700" }}
      />
      <ProgressRing
        color={{ text: "text-yellow-700", ring: "text-yellow-A700" }}
        progress={95}
      />
    </>
  ),
  classes: "w-full ",
};
