import Create from "../../app/components/modals/Create";
import TextInput from "../../app/components/controls/TextInput";

export default {
  title: "Components/Modals/Create",
  component: Create,
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component:
          "Create dialog component with portal rendering, keyboard navigation, and focus trap. Supports multi-step workflows with stepper integration. Used for the create flow in the application.",
      },
    },
  },
  argTypes: {
    isOpen: {
      control: { type: "boolean" },
    },
    title: {
      control: { type: "text" },
    },
    description: {
      control: { type: "text" },
    },
    showBackButton: {
      control: { type: "boolean" },
    },
    showNextButton: {
      control: { type: "boolean" },
    },
    nextButtonDisabled: {
      control: { type: "boolean" },
    },
    backdropVariant: {
      control: { type: "select" },
      options: ["default", "blurredYellow"],
    },
    currentStep: {
      control: { type: "number", min: 1, max: 5 },
    },
    totalSteps: {
      control: { type: "number", min: 1, max: 5 },
    },
  },
  tags: ["autodocs"],
};

const Template = (args) => {
  return (
    <Create {...args} isOpen={true} onClose={() => {}}>
      {args.children}
    </Create>
  );
};

export const Default = {
  args: {
    isOpen: true,
    title: "What do you call your group's new policy?",
    description: "You can also combine or add new approaches to the list",
    children: (
      <div className="space-y-4">
        <TextInput label="Label" placeholder="Policy name" value="" />
        <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
          0/48
        </p>
      </div>
    ),
    showBackButton: true,
    showNextButton: true,
    backButtonText: "Back",
    nextButtonText: "Next",
    nextButtonDisabled: false,
  },
  render: Template,
};
export const WithStepper = {
  args: {
    isOpen: true,
    title: "What do you call your group's new policy?",
    description: "You can also combine or add new approaches to the list",
    children: (
      <div className="space-y-4">
        <TextInput label="Label" placeholder="Policy name" value="" />
        <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
          0/48
        </p>
      </div>
    ),
    showBackButton: true,
    showNextButton: true,
    backButtonText: "Back",
    nextButtonText: "Next",
    nextButtonDisabled: false,
    currentStep: 1,
    totalSteps: 3,
  },
  render: Template,
};
export const Step2 = {
  args: {
    isOpen: true,
    title: "How should conflicts be resolved?",
    description: "You can also combine or add new approaches to the list",
    children: (
      <div className="space-y-4">
        <TextInput label="Label" placeholder="Enter text" value="" />
      </div>
    ),
    showBackButton: true,
    showNextButton: true,
    backButtonText: "Back",
    nextButtonText: "Next",
    nextButtonDisabled: false,
    currentStep: 2,
    totalSteps: 3,
  },
  render: Template,
};
export const Step3 = {
  args: {
    isOpen: true,
    title: "Final step",
    description: "Review your settings",
    children: (
      <div className="space-y-4">
        <p className="text-[var(--color-content-default-primary)]">
          Review your policy configuration
        </p>
      </div>
    ),
    showBackButton: true,
    showNextButton: true,
    backButtonText: "Back",
    nextButtonText: "Finish",
    nextButtonDisabled: false,
    currentStep: 3,
    totalSteps: 3,
  },
  render: Template,
};
export const WithCustomHeader = {
  args: {
    isOpen: true,
    headerContent: <div className="text-lg font-semibold">Custom header</div>,
    children: (
      <div className="space-y-4">
        <p className="text-[var(--color-content-default-primary)]">
          When headerContent is provided, the default title and description are
          not shown.
        </p>
      </div>
    ),
    showBackButton: false,
    showNextButton: true,
    nextButtonText: "Continue",
  },
  render: Template,
};
export const WithoutFooter = {
  args: {
    isOpen: true,
    title: "Simple Create Dialog",
    description: "This create dialog has no footer buttons",
    children: (
      <div className="space-y-4">
        <p className="text-[var(--color-content-default-primary)]">
          Modal content without footer
        </p>
      </div>
    ),
    showBackButton: false,
    showNextButton: false,
  },
  render: Template,
};
export const LoginYellowBackdrop = {
  args: {
    isOpen: true,
    title: "Horizontalism",
    description:
      "Edit or add to this description to describe what this value means to your community.",
    backdropVariant: "blurredYellow",
    children: (
      <div className="space-y-4">
        <p className="text-[var(--color-content-default-primary)]">
          Core value detail body (yellow blurred overlay like Login).
        </p>
      </div>
    ),
    showBackButton: false,
    showNextButton: true,
    nextButtonText: "Add Value",
    nextButtonDisabled: false,
  },
  render: Template,
};
export const NextButtonDisabled = {
  args: {
    isOpen: true,
    title: "What do you call your group's new policy?",
    description: "You can also combine or add new approaches to the list",
    children: (
      <div className="space-y-4">
        <TextInput label="Label" placeholder="Policy name" value="" />
        <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
          0/48
        </p>
      </div>
    ),
    showBackButton: true,
    showNextButton: true,
    backButtonText: "Back",
    nextButtonText: "Next",
    nextButtonDisabled: true,
    currentStep: 1,
    totalSteps: 3,
  },
  render: Template,
};