import { useState } from 'react';
import { ModalInformativo } from './ModalInformativo';
import { Button } from '../../Atoms/Button/Button';

export default {
  title: 'Layout/ModalInformativo',
  component: ModalInformativo,
  tags: ['autodocs'],
  argTypes: {
    variant: { control: 'radio', options: ['success', 'error', 'info'] },
    isOpen: { control: 'boolean' },
    showOverlay: { control: 'boolean' },
    closeOnOverlayClick: { control: 'boolean' },
  },
};

export const Success = {
  args: {
    isOpen: true,
    variant: 'success',
    title: 'Contraseña actualizada',
    description: 'Tu contraseña fue cambiada correctamente. Usá la nueva contraseña la próxima vez que inicies sesión.',
    buttonLabel: 'Volver a Configuración',
  },
};

export const Error = {
  args: {
    isOpen: true,
    variant: 'error',
    title: 'No se pudo actualizar',
    description: 'Ocurrió un error al intentar cambiar la contraseña. Intentá de nuevo.',
    buttonLabel: 'Entendido',
  },
};

export const Info = {
  args: {
    isOpen: true,
    variant: 'info',
    title: 'Información',
    description: 'Tené en cuenta que los cambios pueden demorar unos minutos en aplicarse.',
    buttonLabel: 'Aceptar',
  },
};

export const Size400x314 = {
  render: () => (
    <div
      className="relative"
      style={{
        width: '400px',
        height: '314px',
        border: '1px dashed #c4c4c4',
        background: '#f8fafc',
      }}
    >
      <ModalInformativo
        attach="parent"
        showOverlay={false}
        isOpen
        variant="success"
        title="Contraseña actualizada"
        description="Tu contraseña fue cambiada correctamente. Usá la nueva contraseña la próxima vez que inicies sesión."
        buttonLabel="Volver a Configuración"
        containerStyle={{ width: '400px', height: '314px' }}
      />
    </div>
  ),
};

export const Resizable = {
  render: () => (
    <div className="p-6">
      <div
        style={{
          width: '400px',
          height: '314px',
          resize: 'both',
          overflow: 'auto',
          border: '1px dashed #c4c4c4',
          background: '#f8fafc',
          padding: '8px',
          boxSizing: 'border-box',
        }}
      >
        <div className="relative" style={{ width: '100%', height: '100%' }}>
          <ModalInformativo
            attach="parent"
            showOverlay={false}
            isOpen
            variant="success"
            title="Contraseña actualizada"
            description="Tu contraseña fue cambiada correctamente. Usá la nueva contraseña la próxima vez que inicies sesión."
            buttonLabel="Volver a Configuración"
            containerStyle={{ width: '100%', height: '100%' }}
          />
        </div>
      </div>
      <p className="mt-3 text-sm text-gray-600">
        Arrastrá la esquina inferior derecha del recuadro para cambiar ancho y alto.
      </p>
    </div>
  ),
};

export const Controlled = {
  render: () => {
    const [open, setOpen] = useState(false);
    return (
      <div className="p-6">
        <Button onClick={() => setOpen(true)}>Abrir ModalInformativo</Button>
        <ModalInformativo
          isOpen={open}
          variant="success"
          title="Contraseña actualizada"
          description="Tu contraseña fue cambiada correctamente. Usá la nueva contraseña la próxima vez que inicies sesión."
          buttonLabel="Volver a Configuración"
          onButtonClick={() => setOpen(false)}
          onClose={() => setOpen(false)}
        />
      </div>
    );
  },
};

