import { HeaderCore } from './HeaderCore';
import { useMemo, useState } from 'react';

export default {
  title: 'Layout/HeaderCore',
  component: HeaderCore,
  tags: ['autodocs'],
};

export const Default = {
  render: () => (
    <HeaderCore
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      userName="Maria García Alonso"
      userAvatar="https://i.pravatar.cc/150?img=12"
      notificationCount={7}
      onSearch={(value) => console.log('Búsqueda:', value)}
      onNotificationClick={() => console.log('Notificaciones clickeadas')}
      onUserClick={() => console.log('Usuario clickeado')}
    />
  ),
};

export const SinNotificaciones = {
  render: () => (
    <HeaderCore
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      userName="Juan Pérez"
      userAvatar="https://i.pravatar.cc/150?img=33"
      notificationCount={0}
    />
  ),
};

export const ConNotificaciones = {
  render: () => (
    <HeaderCore
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      userName="Maria García Alonso"
      userAvatar="https://i.pravatar.cc/150?img=12"
      notificationCount={7}
      onSearch={(value) => console.log('Búsqueda:', value)}
      onNotificationClick={() => console.log('Notificaciones clickeadas')}
      onUserClick={() => console.log('Usuario clickeado')}
    />
  ),
};

export const ConMuchasNotificaciones = {
  render: () => (
    <HeaderCore
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      userName="Ana Martínez"
      userAvatar="https://i.pravatar.cc/150?img=47"
      notificationCount={15}
    />
  ),
};

export const SinUsuario = {
  render: () => (
    <HeaderCore
      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
      notificationCount={3}
    />
  ),
};

const PERSONAS_BUSQUEDA_MOCK = [
  {
    id: '1',
    nombre: 'Pedro Sanchez Carmona',
    email: 'psanchez.car@nucleus.com.ar',
    documento: 'Pasaporte AAB123456Y',
    estado: 'Activa',
    foto: '',
  },
  {
    id: '2',
    nombre: 'Carlos Ruiz',
    email: 'carlos.ruiz@nucleus.com.ar',
    documento: 'Cédula 12345678',
    estado: 'Archivada',
    foto: 'https://i.pravatar.cc/80?img=12',
  },
  {
    id: '3',
    nombre: 'Carlos Jimenez',
    email: 'carlos.jimenez@nucleus.com.ar',
    documento: 'DNI 30685632',
    estado: 'Archivada',
    foto: 'https://i.pravatar.cc/80?img=33',
  },
  {
    id: '4',
    nombre: 'Carla Medina',
    email: 'carla.medina@nucleus.com.ar',
    documento: 'Pasaporte ABZ445512',
    estado: 'Activa',
    foto: '',
  },
  {
    id: '5',
    nombre: 'Carolina Gomez',
    email: 'carolina.gomez@nucleus.com.ar',
    documento: 'DNI 28999111',
    estado: 'Activa',
    foto: '',
  },
];

export const BusquedaConListado = {
  render: () => {
    const [query, setQuery] = useState('');

    const results = useMemo(() => {
      const normalizedQuery = query.trim().toLowerCase();
      if (!normalizedQuery) return [];
      return PERSONAS_BUSQUEDA_MOCK.filter((persona) =>
        `${persona.nombre} ${persona.email} ${persona.documento}`.toLowerCase().includes(normalizedQuery)
      );
    }, [query]);

    return (
      <div style={{ padding: '24px', background: '#f7f7f7' }}>
        <HeaderCore
          searchValue={query}
          searchPlaceholder="Buscar personas, emails o documento..."
          mobileSearchPlaceholder="Buscar personas..."
          userName="Maria García Alonso"
          userAvatar="https://i.pravatar.cc/150?img=12"
          notificationCount={7}
          onSearch={setQuery}
          searchResults={results}
          isSearchResultsOpen={query.trim().length > 0}
          searchResultVariant="persona"
          maxVisibleSearchResults={3}
          searchResultItemMinHeight={96}
          onSearchResultsClose={() => setQuery('')}
          onSearchResultClick={(item) => {
            setQuery(item.nombre);
          }}
          getSearchResultKey={(item) => item.id}
        />
      </div>
    );
  },
};

export const BusquedaConListadoCustomRenderer = {
  render: () => {
    const [query, setQuery] = useState('car');

    const results = useMemo(() => {
      const normalizedQuery = query.trim().toLowerCase();
      if (!normalizedQuery) return [];
      return PERSONAS_BUSQUEDA_MOCK.filter((persona) =>
        `${persona.nombre} ${persona.email} ${persona.documento}`.toLowerCase().includes(normalizedQuery)
      );
    }, [query]);

    return (
      <div style={{ padding: '24px', background: '#f7f7f7' }}>
        <HeaderCore
          searchValue={query}
          searchPlaceholder="Buscar personas, emails o documento..."
          mobileSearchPlaceholder="Buscar personas..."
          userName="Maria García Alonso"
          userAvatar="https://i.pravatar.cc/150?img=12"
          notificationCount={7}
          onSearch={setQuery}
          searchResults={results}
          isSearchResultsOpen={query.trim().length > 0}
          searchResultVariant="persona"
          maxVisibleSearchResults={3}
          searchResultItemMinHeight={72}
          onSearchResultsClose={() => setQuery('')}
          onSearchResultClick={(item) => setQuery(item.nombre)}
          getSearchResultKey={(item) => item.id}
          renderSearchResultItem={(item) => (
            <div style={{ padding: '16px', fontFamily: 'var(--font-family-sans)', color: '#29474C' }}>
              Renderer custom: {item.nombre}
            </div>
          )}
        />
      </div>
    );
  },
};
