import { Auth } from "./Auth.jsx";
import { Login } from "../Form/Login/Login.jsx";
import { SignUp } from "../Form/SignUp/SignUp.jsx";
import { action } from "@storybook/addon-actions";

export default {
  title: "Auth/Auth",
  component: Auth,
  argTypes: {
    loginLabel: { control: "text", name: "Login Title" },
    signupLabel: { control: "text", name: "Signup Title" },
    loginTabLabel: { control: "text", name: "Login Tab Label" },
    signupTabLabel: { control: "text", name: "Signup Tab Label" },
    initialMode: {
      control: { type: "radio" },
      options: ["login", "signup"],
      name: "Initial Mode",
    },
    showForgotPassword: { control: "boolean", name: "Show Forgot Password" },
    showSwitchPrompt: { control: "boolean", name: "Show Switch Prompt" },
  },
};

const DummyLogin = ({ onLogin }) => (
  <div>
    <Login onLogin={onLogin} />
  </div>
);

const DummySignUp = ({ onSubmit }) => (
  <div>
    <SignUp onSignUpSubmit={async (formData) => {
      action('Sign Up Submitted')(formData); // logs action
      return new Promise((resolve) => setTimeout(resolve, 1000)); // simulate async
    }} />
  </div>
);

export const AuthTabs = (args) => (
  <Auth
    {...args}
    LoginComponent={DummyLogin}
    SignUpComponent={DummySignUp}
    onLoginSubmit={action("Login Submit")}
    onSignUpSubmit={async(formData)=>action("Signup Submit")}
  />
);

AuthTabs.args = {
  loginLabel: "Login Form",
  signupLabel: "SignUp Form",
  loginTabLabel: "Login",
  signupTabLabel: "Signup",
  initialMode: "login",
  showForgotPassword: true,
  showSwitchPrompt: true,
};
