import { LoginForm } from './LoginForm';
import { I18nProvider } from '../../../providers/I18nProvider';

export default {
  title: 'Views/LoginForm',
  component: LoginForm,
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <I18nProvider language="es-AR">
        <div style={{ padding: '2rem', maxWidth: '500px', margin: '0 auto' }}>
          <Story />
        </div>
      </I18nProvider>
    ),
  ],
  argTypes: {
    variant: {
      control: 'select',
      options: ['hexa-login', undefined],
      description: 'Variante del formulario de login',
    },
    defaultEmail: {
      control: 'text',
      description: 'Valor inicial del email. Sirve para prellenar el formulario (ej. "recordar email" guardado en localStorage por el consumidor).',
    },
    defaultPassword: {
      control: 'text',
      description: 'Valor inicial de la contraseña. Sirve para prellenar el formulario (ej. "recordar contraseña" guardado en localStorage por el consumidor).',
    },
    defaultRememberMe: {
      control: 'boolean',
      description: 'Valor inicial del checkbox "Recordarme". Sirve para reflejar el estado guardado por el consumidor.',
    },
    loading: {
      control: 'boolean',
      description: 'Estado de carga del formulario',
    },
    showSocialLogin: {
      control: 'boolean',
      description: 'Mostrar botones de login social',
    },
    showDivider: {
      control: 'boolean',
      description: 'Mostrar divisor antes de los botones sociales',
    },
    generalError: {
      control: 'text',
      description: 'Mensaje de error general',
    },
    passwordRequirementsItems: {
      control: 'object',
      description: 'Array de strings con los requisitos de contraseña',
    },
    passwordRequirementsTitle: {
      control: 'text',
      description: 'Título opcional para la caja de requisitos de contraseña',
    },
  },
};

// Variante Hexa Login (principal)
export const HexaLogin = {
  args: {
    variant: 'hexa-login',
    onSubmit: (data) => {
      console.log('Login data:', data);
      alert('Login submitted!');
    },
    onForgotPassword: () => {
      alert('Forgot password clicked');
    },
    onGoogleLogin: () => {
      alert('Google login clicked');
    },
    onMicrosoftLogin: () => {
      alert('Microsoft login clicked');
    },
  },
};

// Variante por defecto
export const Default = {
  args: {
    onSubmit: (data) => {
      console.log('Login data:', data);
      alert('Login submitted!');
    },
  },
};

// Con estado de carga
export const Loading = {
  args: {
    variant: 'hexa-login',
    loading: true,
    onSubmit: (data) => {
      console.log('Login data:', data);
    },
    onGoogleLogin: () => {
      alert('Google login clicked');
    },
    onMicrosoftLogin: () => {
      alert('Microsoft login clicked');
    },
  },
};

// Con error general (string)
export const WithError = {
  args: {
    variant: 'hexa-login',
    generalError: 'Credenciales incorrectas',
    onSubmit: (data) => {
      console.log('Login data:', data);
    },
    onGoogleLogin: () => {
      alert('Google login clicked');
    },
    onMicrosoftLogin: () => {
      alert('Microsoft login clicked');
    },
  },
};

// Con error general (boolean - muestra textos i18n)
export const WithErrorBoolean = {
  args: {
    variant: 'hexa-login',
    generalError: true,
    onSubmit: (data) => {
      console.log('Login data:', data);
    },
    onGoogleLogin: () => {
      alert('Google login clicked');
    },
    onMicrosoftLogin: () => {
      alert('Microsoft login clicked');
    },
  },
};

// Con error general personalizado
export const WithCustomError = {
  args: {
    variant: 'hexa-login',
    generalError: true,
    generalErrorTitle: 'Error de autenticación',
    generalErrorSubtitle: 'Verifica tus credenciales e intenta nuevamente.',
    onSubmit: (data) => {
      console.log('Login data:', data);
    },
    onGoogleLogin: () => {
      alert('Google login clicked');
    },
    onMicrosoftLogin: () => {
      alert('Microsoft login clicked');
    },
  },
};

// Sin login social
export const WithoutSocialLogin = {
  args: {
    variant: 'hexa-login',
    showSocialLogin: false,
    showDivider: false,
    onSubmit: (data) => {
      console.log('Login data:', data);
      alert('Login submitted!');
    },
    onForgotPassword: () => {
      alert('Forgot password clicked');
    },
  },
};

// Con labels personalizados
export const CustomLabels = {
  args: {
    variant: 'hexa-login',
    labels: {
      emailLabel: 'Correo electrónico',
      passwordLabel: 'Contraseña',
      rememberMeLabel: 'Recordar sesión',
      forgotPasswordLabel: '¿Olvidaste tu contraseña?',
      continueWithLabel: 'O continúa con',
      googleLabel: 'Google',
      microsoftLabel: 'Microsoft',
    },
    onSubmit: (data) => {
      console.log('Login data:', data);
      alert('Login submitted!');
    },
    onGoogleLogin: () => {
      alert('Google login clicked');
    },
    onMicrosoftLogin: () => {
      alert('Microsoft login clicked');
    },
  },
};

// Versión en español
export const Spanish = {
  decorators: [
    (Story) => (
      <I18nProvider language="es-AR">
        <div style={{ padding: '2rem', maxWidth: '500px', margin: '0 auto' }}>
          <Story />
        </div>
      </I18nProvider>
    ),
  ],
  args: {
    variant: 'hexa-login',
    onSubmit: (data) => {
      console.log('Login data:', data);
    },
    onGoogleLogin: () => {
      alert('Google login clicked');
    },
    onMicrosoftLogin: () => {
      alert('Microsoft login clicked');
    },
  },
};

// Versión en portugués
export const Portuguese = {
  decorators: [
    (Story) => (
      <I18nProvider language="pt-BR">
        <div style={{ padding: '2rem', maxWidth: '500px', margin: '0 auto' }}>
          <Story />
        </div>
      </I18nProvider>
    ),
  ],
  args: {
    variant: 'hexa-login',
    onSubmit: (data) => {
      console.log('Login data:', data);
    },
    onGoogleLogin: () => {
      alert('Google login clicked');
    },
    onMicrosoftLogin: () => {
      alert('Microsoft login clicked');
    },
  },
};

// Formulario prellenado (recordar email, contraseña y estado del checkbox)
export const PrefilledRememberMe = {
  args: {
    variant: 'hexa-login',
    defaultEmail: 'usuario@ejemplo.com',
    defaultPassword: '••••••••',
    defaultRememberMe: true,
    onSubmit: (data) => {
      console.log('Login data:', data);
      alert('Login submitted!');
    },
    onForgotPassword: () => alert('Forgot password clicked'),
    onGoogleLogin: () => alert('Google login clicked'),
    onMicrosoftLogin: () => alert('Microsoft login clicked'),
  },
};

// Con requisitos de contraseña personalizados
export const CustomPasswordRequirements = {
  args: {
    variant: 'hexa-login',
    passwordRequirementsTitle: 'Requisitos de contraseña',
    passwordRequirementsItems: [
      'Mínimo 12 caracteres',
      'Debe contener mayúsculas y minúsculas',
      'Debe incluir números',
      'Debe incluir símbolos especiales',
      'No puede ser una contraseña común',
    ],
    onSubmit: (data) => {
      console.log('Login data:', data);
      alert('Login submitted!');
    },
    onForgotPassword: () => {
      alert('Forgot password clicked');
    },
    onGoogleLogin: () => {
      alert('Google login clicked');
    },
    onMicrosoftLogin: () => {
      alert('Microsoft login clicked');
    },
  },
};

