import { useState } from 'react';
import { CambiarContrasena } from './CambiarContrasena';

export default {
  title: 'Layout/CambiarContrasena',
  component: CambiarContrasena,
  tags: ['autodocs'],
  argTypes: {
    loading: { control: 'boolean', description: 'Muestra skeleton de carga' },
    title: { control: 'text', description: 'Título principal del componente' },
    showCloseButton: { control: 'boolean', description: 'Muestra/oculta el botón X de cierre' },
    onClose: { action: 'onClose', description: 'Callback de cierre del panel' },
    firstInputLabel: { control: 'text', description: 'Label del primer campo' },
    firstInputValue: { control: 'text', description: 'Valor del primer campo' },
    firstInputPlaceholder: { control: 'text', description: 'Placeholder del primer campo' },
    secondInputLabel: { control: 'text', description: 'Label del segundo campo' },
    secondInputValue: { control: 'text', description: 'Valor del segundo campo' },
    secondInputPlaceholder: { control: 'text', description: 'Placeholder del segundo campo' },
    thirdInputLabel: { control: 'text', description: 'Label del tercer campo' },
    thirdInputValue: { control: 'text', description: 'Valor del tercer campo' },
    thirdInputPlaceholder: { control: 'text', description: 'Placeholder del tercer campo' },
    showPasswordRequirements: { control: 'boolean', description: 'Muestra/oculta el bloque de requisitos de contraseña' },
    passwordRequirementsMessage: { control: 'text', description: 'Texto del mensaje de requisitos (enviado por props)' },
    showCurrentPasswordInvalid: { control: 'boolean', description: 'Muestra error de contraseña actual incorrecta' },
    currentPasswordInvalidMessage: { control: 'text', description: 'Texto del error de contraseña actual' },
    guardarButtonText: { control: 'text', description: 'Texto del botón guardar' },
    guardarButtonDisabled: { control: 'boolean', description: 'Habilita/deshabilita botón' },
    guardarButtonOnClick: { action: 'guardarButtonOnClick', description: 'Callback onClick guardar' },
    showPasswordMismatch: { control: 'boolean', description: 'Muestra error si las contraseñas no coinciden' },
    passwordMismatchMessage: { control: 'text', description: 'Texto del error de contraseñas no coinciden' },
  },
};

const withControlledInputs = (args) => {
  const [first, setFirst] = useState(args.firstInputValue ?? '');
  const [second, setSecond] = useState(args.secondInputValue ?? '');
  const [third, setThird] = useState(args.thirdInputValue ?? '');

  return (
    <CambiarContrasena
      {...args}
      firstInputValue={first}
      secondInputValue={second}
      thirdInputValue={third}
      firstInputOnChange={(e) => setFirst(e.target.value)}
      secondInputOnChange={(e) => setSecond(e.target.value)}
      thirdInputOnChange={(e) => setThird(e.target.value)}
    />
  );
};

export const Default = {
  render: withControlledInputs,
  args: {
    loading: false,
    title: 'Cambiar contraseña',
    firstInputLabel: 'Contraseña actual',
    firstInputValue: '',
    firstInputPlaceholder: 'Ingresa tu contraseña actual',
    secondInputLabel: 'Nueva contraseña',
    secondInputValue: '',
    secondInputPlaceholder: 'Ingresa tu nueva contraseña',
    thirdInputLabel: 'Repetir tu contraseña',
    thirdInputValue: '',
    thirdInputPlaceholder: 'Repite tu nueva contraseña',
    guardarButtonText: 'Guardar',
    guardarButtonDisabled: false,
    guardarButtonOnClick: () => {},
    showCloseButton: true,
  },
};

export const Loading = {
  args: {
    loading: true,
    title: 'Cambiar contraseña',
    firstInputLabel: 'Contraseña actual',
    secondInputLabel: 'Nueva contraseña',
    thirdInputLabel: 'Repetir tu contraseña',
    guardarButtonText: 'Guardar',
  },
};

export const ConMensajeRequisitosES = {
  render: withControlledInputs,
  args: {
    loading: false,
    title: 'Cambiar contraseña',
    firstInputLabel: 'Contraseña actual',
    firstInputValue: '',
    firstInputPlaceholder: 'Ingresa tu contraseña actual',
    secondInputLabel: 'Nueva contraseña',
    secondInputValue: '',
    secondInputPlaceholder: 'Ingresa tu nueva contraseña',
    thirdInputLabel: 'Repetir tu contraseña',
    thirdInputValue: '',
    thirdInputPlaceholder: 'Repite tu nueva contraseña',
    showPasswordRequirements: true,
    passwordRequirementsMessage:
      'Recuerda que la contraseña debe tener:\n\n• Un mínimo de 6 caracteres\n• Una mayúscula, un número, un carácter especial',
    guardarButtonText: 'Guardar',
    guardarButtonDisabled: false,
    guardarButtonOnClick: () => {},
    showCloseButton: true,
  },
};

export const ConMensajeRequisitosEN = {
  render: withControlledInputs,
  args: {
    loading: false,
    title: 'Change password',
    firstInputLabel: 'Current password',
    firstInputValue: '',
    firstInputPlaceholder: 'Enter your current password',
    secondInputLabel: 'New password',
    secondInputValue: '',
    secondInputPlaceholder: 'Enter your new password',
    thirdInputLabel: 'Repeat your password',
    thirdInputValue: '',
    thirdInputPlaceholder: 'Repeat your new password',
    showPasswordRequirements: true,
    passwordRequirementsMessage:
      'Remember your password must have:\n\n• At least 6 characters\n• One uppercase letter, one number, one special character',
    guardarButtonText: 'Save',
    guardarButtonDisabled: false,
    guardarButtonOnClick: () => {},
    showCloseButton: true,
    closeButtonAriaLabel: 'Close',
  },
};

export const NoCoincidenLasContrasenas = {
  render: withControlledInputs,
  args: {
    loading: false,
    title: 'Cambiar contraseña',
    firstInputLabel: 'Contraseña actual',
    firstInputPlaceholder: 'Ingresa tu contraseña actual',
    secondInputLabel: 'Nueva contraseña',
    secondInputPlaceholder: 'Ingresa tu nueva contraseña',
    thirdInputLabel: 'Repetir tu contraseña',
    thirdInputPlaceholder: 'Repite tu nueva contraseña',
    showPasswordRequirements: true,
    showPasswordMismatch: true,
    passwordMismatchMessage: 'No coinciden las contraseñas.',
    guardarButtonText: 'Guardar',
    guardarButtonDisabled: false,
    guardarButtonOnClick: () => {},
    showCloseButton: true,
  },
};

export const ContrasenaActualIncorrecta = {
  render: withControlledInputs,
  args: {
    loading: false,
    title: 'Cambiar contraseña',
    firstInputLabel: 'Contraseña actual',
    firstInputPlaceholder: 'Ingresa tu contraseña actual',
    secondInputLabel: 'Nueva contraseña',
    secondInputPlaceholder: 'Ingresa tu nueva contraseña',
    thirdInputLabel: 'Repetir tu contraseña',
    thirdInputPlaceholder: 'Repite tu nueva contraseña',
    showCurrentPasswordInvalid: true,
    currentPasswordInvalidMessage: 'La contraseña actual no es correcta.',
    showPasswordRequirements: true,
    guardarButtonText: 'Guardar',
    guardarButtonDisabled: false,
    guardarButtonOnClick: () => {},
    showCloseButton: true,
  },
};

