import { useState } from 'react';
import { Toast } from './Toast';
import { Button } from '../Button/Button';

export default {
  title: 'Atoms/Toast',
  component: Toast,
  tags: ['autodocs'],
};

export const Info = {
  render: () => {
    const [show, setShow] = useState(false);
    return (
      <>
        <Button onClick={() => setShow(true)}>Mostrar Toast Info</Button>
        {show && (
          <Toast
            message="Esta es una notificación informativa"
            variant="info"
            onClose={() => setShow(false)}
          />
        )}
      </>
    );
  },
};

export const Success = {
  render: () => {
    const [show, setShow] = useState(false);
    return (
      <>
        <Button onClick={() => setShow(true)}>Mostrar Toast Success</Button>
        {show && (
          <Toast
            variant="success"
            onClose={() => setShow(false)}
          />
        )}
      </>
    );
  },
};

export const Warning = {
  render: () => {
    const [show, setShow] = useState(false);
    return (
      <>
        <Button onClick={() => setShow(true)}>Mostrar Toast Warning</Button>
        {show && (
          <Toast
            message="Por favor revisa esta información"
            variant="warning"
            onClose={() => setShow(false)}
          />
        )}
      </>
    );
  },
};

export const Danger = {
  render: () => {
    const [show, setShow] = useState(false);
    return (
      <>
        <Button onClick={() => setShow(true)}>Mostrar Toast Error</Button>
        {show && (
          <Toast
            variant="danger"
            onClose={() => setShow(false)}
          />
        )}
      </>
    );
  },
};

export const AutoClose = {
  render: () => {
    const [show, setShow] = useState(false);
    return (
      <>
        <Button onClick={() => setShow(true)}>Mostrar Toast (Auto-close 3s)</Button>
        {show && (
          <Toast
            message="Este toast se cerrará automáticamente en 3 segundos"
            variant="info"
            duration={3000}
            onClose={() => setShow(false)}
          />
        )}
      </>
    );
  },
};

/**
 * Toast posicionado respecto del contenedor padre (attach="parent").
 * El padre debe tener position: relative (o absolute/fixed). Así podés poner
 * el toast dentro de un card, modal, sección, etc.
 */
export const DentroDeContenedor = {
  render: () => {
    const [show, setShow] = useState(false);
    return (
      <div style={{ position: 'relative', minHeight: 200, border: '1px dashed #ccc', borderRadius: 8, padding: 16 }}>
        <p style={{ margin: '0 0 12px 0', fontSize: 14, color: '#666' }}>
          Contenedor con position: relative. El toast se muestra dentro de este recuadro.
        </p>
        <Button onClick={() => setShow(true)}>Mostrar Toast dentro del contenedor</Button>
        {show && (
          <Toast
            variant="success"
            position="top-right"
            attach="parent"
            onClose={() => setShow(false)}
          />
        )}
      </div>
    );
  },
};

