import { useState } from 'react';
import { Button, Select, Toast } from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const TOAST_GUIDE = {
  summary:
    'All Toast props are optional except you usually pass message and onClose for a useful toast. Sensible defaults exist for variant, position, duration, animation, etc.',
  propsOverview:
    'Optional: variant, message, title, duration (ms), dismissible, position, animation, showProgress, pauseOnHover, ariaLive, role, onClose, className (if extended).',
  features: ['position uses corner grid names (e.g. bottom-end) or legacy aliases'],
  codeLabel: 'Full example (props optional)',
  code: `import { Toast } from 'ccl-ui-components-react';

<Toast
  variant="primary"
  title="Notification"
  message="Hello"
  duration={5000}
  dismissible={true}
  position="bottom-end"
  animation="slide"
  showProgress={false}
  pauseOnHover={true}
  ariaLive="polite"
  role="status"
  onClose={() => {}}
/>`,
} as const;

export default function ToastPage() {
  const [visible, setVisible] = useState(false);
  const [variant, setVariant] = useState<
    'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
  >('primary');
  const [pos, setPos] = useState<
    | 'top-start'
    | 'top-center'
    | 'top-end'
    | 'middle-start'
    | 'middle-center'
    | 'middle-end'
    | 'bottom-start'
    | 'bottom-center'
    | 'bottom-end'
  >('bottom-end');
  return (
    <DemoPageWithGuide guide={TOAST_GUIDE}>
    <main className="demo demo-page">
      <h1>Toast</h1>
      <p className="demo-lead">Toast notifications with placement options.</p>
      <section className="demo-section">
        <div style={{ display: 'flex', gap: 8 }}>
          <Select options={[{ value: 'primary', label: 'primary' }, { value: 'secondary', label: 'secondary' }, { value: 'success', label: 'success' }, { value: 'danger', label: 'danger' }, { value: 'warning', label: 'warning' }, { value: 'info', label: 'info' }, { value: 'light', label: 'light' }, { value: 'dark', label: 'dark' }]} value={variant} onSelectionChange={(value) => setVariant(value as typeof variant)} />
          <Select options={[{ value: 'top-start', label: 'top-start' }, { value: 'top-center', label: 'top-center' }, { value: 'top-end', label: 'top-end' }, { value: 'middle-start', label: 'middle-start' }, { value: 'middle-center', label: 'middle-center' }, { value: 'middle-end', label: 'middle-end' }, { value: 'bottom-start', label: 'bottom-start' }, { value: 'bottom-center', label: 'bottom-center' }, { value: 'bottom-end', label: 'bottom-end' }]} value={pos} onSelectionChange={(value) => setPos(value as typeof pos)} />
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
          <Button variant="primary" onClick={() => setVisible(true)}>Show toast</Button>
          <Button variant="danger" onClick={() => setVisible(false)}>Hide toast</Button>
        </div>
        {visible ? (
          <Toast
            title="Notification"
            message="Hello from React"
            variant={variant}
            position={pos}
            onClose={() => setVisible(false)}
          />
        ) : null}
      </section>
    </main>
    </DemoPageWithGuide>
  );
}