import React, { useState } from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { ConfirmDialog, Button, ThemeProviderWithStyledEngine } from "..";

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Feedback/Confirm Dialog",
  component: ConfirmDialog,
  argTypes: {
    confirmMessage: {
      name: "Additional checkbox prompt message",
    },
  },
  decorators: [decorator],
} satisfies Meta<typeof ConfirmDialog>;

export default meta;

const Template: StoryFn<typeof ConfirmDialog> = ({ isOpen, ...args }) => {
  const [isDialogOpen, setIsOpen] = useState(isOpen);

  return (
    <>
      <Button onClick={() => setIsOpen(!isDialogOpen)}>
        Show Confirm Dialog
      </Button>
      <ConfirmDialog
        {...args}
        isOpen={isDialogOpen}
        onCancel={() => {
          setIsOpen(false);
        }}
        onConfirm={() => {
          setIsOpen(false);
        }}
      >
        {args.children}
      </ConfirmDialog>
    </>
  );
};

export const Default: StoryFn<typeof ConfirmDialog> = Template.bind({});

Default.args = {
  title: "Delete something?",
  confirmMessage: undefined,
  isConfirmRequired: false,
  variant: "alert",
  icon: "trash",
  primaryActionText: "Confirm",
  secondaryActionText: "Cancel",
  isOpen: false,
  children:
    "It will also remove all contents. You won't be able to restore it.",
  width: 260,
};
