import { useState } from 'react';
import { SidebarPoint, SidebarPointMobile } from './SidebarPoint';

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

// Mock data con 2 títulos y 2 secciones
const mockSections = [
  {
    title: 'PERSONAS',
    items: [
      { id: 'inicio', label: 'Inicio', icon: 'HomeIcon' },
      { id: 'empleados', label: 'Empleados', icon: 'UserGroupIcon' },
      { id: 'organizacion', label: 'Organización', icon: 'BuildingOfficeIcon' },
    ],
  },
  {
    title: 'TALENTO',
    items: [
      { id: 'reclutamiento', label: 'Reclutamiento', icon: 'UserPlusIcon' },
      { id: 'desarrollo', label: 'Desarrollo', icon: 'AcademicCapIcon' },
    ],
  },
];

export const Default = {
  render: () => {
    const [activeItem, setActiveItem] = useState('inicio');
    return (
      <div className="h-screen bg-gray-100">
        <SidebarPoint
          sections={mockSections}
          activeItem={activeItem}
          onItemClick={setActiveItem}
          companyName="HEXA Point"
          onCompanyClick={() => console.log('Company clicked')}
          Client={false}
          footerText="v1.0 | Powered by Nucleus"
        />
      </div>
    );
  },
};

export const Colapsado = {
  render: () => {
    const [activeItem, setActiveItem] = useState('inicio');
    return (
      <div className="h-screen bg-gray-100">
        <SidebarPoint
          sections={mockSections}
          activeItem={activeItem}
          onItemClick={setActiveItem}
          defaultCollapsed={true}
          footerText="v1.0 | Powered by Nucleus"
          footerCollapsedContent="v1.0"
        />
      </div>
    );
  },
};

export const ConSeccionesPersonalizadas = {
  render: () => {
    const [activeItem, setActiveItem] = useState('item1');
    const customSections = [
      {
        title: 'ADMINISTRACIÓN',
        items: [
          { id: 'item1', label: 'Usuarios', icon: 'UserIcon' },
          { id: 'item2', label: 'Roles', icon: 'ShieldCheckIcon' },
        ],
      },
      {
        title: 'REPORTES',
        items: [
          { id: 'item3', label: 'Analíticas', icon: 'ChartBarIcon' },
          { id: 'item4', label: 'Exportar', icon: 'ArrowDownTrayIcon' },
        ],
      },
    ];
    return (
      <div className="h-screen bg-gray-100">
        <SidebarPoint
          sections={customSections}
          activeItem={activeItem}
          onItemClick={setActiveItem}
          footerText="v1.0 | Powered by Nucleus"
        />
      </div>
    );
  },
};

export const Mobile = {
  render: () => {
    const [activeItem, setActiveItem] = useState('inicio');
    return (
      <div className="h-screen bg-gray-100 relative">
        <SidebarPointMobile
          sections={mockSections}
          activeItem={activeItem}
          onItemClick={setActiveItem}
          headerImageClient="https://nucleus-teams.atlassian.net/s/150dpd/b/0/fd088157203ba66d5d1bd198b37e1cc3/_/jira-logo-scaled.png"
          companyName="HEXA Point"
          companyLogo="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAJQAmAMBIgACEQEDEQH/xAAbAAEBAAMBAQEAAAAAAAAAAAAABQMEBgIBB//EADYQAAICAgECAwQHBwUAAAAAAAABAgMEEQUSIQYxURMUQWEVNXFygZGyIiM2g7HBwjIzQlRz/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAECAwUE/8QAHxEBAQEAAgIDAQEAAAAAAAAAAAECAxEhMQQSQWFR/9oADAMBAAIRAxEAPwD9bAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGtZn4leT7tZkQjc9Lofn38jZCTUvoBr5WbjYbism6FfV/p6t9zOmmk13T7oEst6fQAFADzZZCquVlklGEVtyfwQHoGHGyqMut2Y1kbIJ6bXqZgkvc7gAAoAAAAAAAAAAOL8QVTu5+dVS3ZJQUVvzfSix4e5Z5MfdMp6yILSb85pevzNHM/jCr79f6UbPiHi5dX0hhbjbD9qxR83r/kvmcJ3LbHm4ms61vP5fLB4z/wBzF+7L+qLt2bj4WNTPJs6IySSem++vkchy/JfSNGNKS1dXGSn6Py7oseK/q3F++v0lmvNsazy+eTeV53VrHd7l+7UOvq+Rjw8yjNrdmNPrgnptJ+ZrWfUDT/6v+JH4a6dHhzOtrepqT0/wS2burK+i81mpP52s5XM4GLY67b05rzUE5a/I8ZeZj5vD5s8axTUapJ9ta7E7wxx+LfiTyciuNs3NxXtF1JaS+Hr3KediUYvFZ/u9Ua1OqTko9lvRJbZ2znfJvH2vpp+D/q63/wBn/RG7k81x+Na67MhOSemoJy1+RG4a2dHhvOsrepqUtP07RMHBuyvHnKHE+9uUmnY9dvlpmZrqSOOOa5xnM/x1WLk0ZdftMe2Nkd63H4GPF5DFy7Z1UW9c4Lclp9u+iPwOPmUctbN4dmPjWpvpemo+hh8L/Wub9j/Uamr4ds8+rcyz3V6/kMWjKhjW2qN09dMdPvt6R8zeRxMHXvVyi35RXdv8CFzf8TYX8r9bPfP4WXXyUeRopV8El+y49Wteq9Bd3z0mufc+3U9VawuSxM5tY1vVKK24taaRtkTg87BzL3KvGjj5fQ1KMeyktrevx0WzWb3Hfi39892gANOgAAIeRxWTZ4hhnRUPYxlBvcu+ku/YufAAkzIxjjznvr9czy/hyy3JdmB7NQn3cJS10v5fIqcvxr5Dj40xlGNsNOLflvWmikDP0jE+Pid+PbnIcfzduG8S66uumMdLT7zXwW/Q3OG4yzG4+/FzVB+1k9qMt9taK4LMRM/Hzm9uaq4rluMtn9HWwnVL4Tet/an8fmjfqxuTtwM2vOnXK26txrjF9o7RWAmOjPBmer4SeE42eLx92NmqElZJ7UZb7NJf2NKnjOW4u2a42yuymT2ozevzXbv9h0YFxC8GepJ+JnH0cm8n2/I319Ci1GmtdvtJ9nE8jh8jZk8ZKDjY22ptdtvbTTOjA+i3glklt8Oalw3JT5KjLvtqtcZQlY+rWtPyS18Fo38+vmI5crcCyuVLS/dzfkVgT6SJPj5kvVvlD4fisqrkLc/OdaslvUK/Lb+JcANSSOnHxzjnUAAVsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/9k="
          onCompanyClick={() => console.log('Company clicked')}
        />
        <div className="p-4">
          <p className="text-sm text-gray-600">
            Haz clic en el botón hamburguesa (esquina superior izquierda) para abrir el menú mobile.
          </p>
        </div>
      </div>
    );
  },
};

export const ConFooter = {
  render: () => {
    const [activeItem, setActiveItem] = useState('inicio');
    return (
      <div className="h-screen bg-gray-100">
        <SidebarPoint
          sections={mockSections}
          activeItem={activeItem}
          onItemClick={setActiveItem}
          companyName="HEXA Point"
          onCompanyClick={() => console.log('Company clicked')}
          footerText="v1.0 | Powered by Nucleus"
        />
      </div>
    );
  },
};

export const ConFooterPersonalizado = {
  render: () => {
    const [activeItem, setActiveItem] = useState('inicio');
    return (
      <div className="h-screen bg-gray-100">
        <SidebarPoint
          sections={mockSections}
          activeItem={activeItem}
          onItemClick={setActiveItem}
          companyName="HEXA Point"
          onCompanyClick={() => console.log('Company clicked')}
          footerText={{
            version: 'v2.1',
            poweredBy: 'Powered by',
            brand: 'Nucleus'
          }}
          footerCollapsedContent={{
            icon: 'InformationCircleIcon',
            text: 'v2.1'
          }}
        />
      </div>
    );
  },
};

export const Client = {
  render: () => {
    const [activeItem, setActiveItem] = useState('inicio');
    return (
      <div className="h-screen bg-gray-100">
        <SidebarPoint
          sections={mockSections}
          activeItem={activeItem}
          onItemClick={setActiveItem}
          companyName="HEXA Point"
          onCompanyClick={() => console.log('Company clicked')}
          Client={false}
          footerText="v1.0 | Powered by Nucleus"
        />
      </div>
    );
  },
};

export const ConHeaderImage = {
  render: () => {
    const [activeItem, setActiveItem] = useState('inicio');
    return (
      <div className="h-screen bg-gray-100">
        <SidebarPoint
          sections={mockSections}
          activeItem={activeItem}
          onItemClick={setActiveItem}
          headerImageClient="https://nucleus-teams.atlassian.net/s/150dpd/b/0/fd088157203ba66d5d1bd198b37e1cc3/_/jira-logo-scaled.png"
          footerText="v1.0 | Powered by Nucleus"
        />
      </div>
    );
  },
};


