import { AccionesPoint } from './AccionesPoint';

export default {
  title: 'Layout/AccionesPoint',
  component: AccionesPoint,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  argTypes: {
    items: {
      control: 'object',
      description:
        'Lista de acciones: { id, text, icon (ej. heroicons-outline/pencil-square), href?, to?, onClick?, badgeBackground? }.',
    },
    onActionClick: {
      action: 'actionClick',
      description: 'Callback global al activar un ítem (después del onClick del ítem).',
    },
    linkComponent: { control: false, description: 'Componente Link del host (React Router, etc.) para `to`.' },
    className: { control: 'text' },
    mobileBreakpointPx: {
      control: { type: 'number', min: 320, max: 1280, step: 1 },
      description: 'Viewport <= px: layout compacto (wrap).',
    },
    ariaLabel: { control: 'text' },
    itemsLayout: {
      control: 'select',
      options: ['start', 'spread', 'center'],
      description: 'Desktop: start = ítems a la izquierda; spread = repartidos; center = centrados.',
    },
    itemsGap: {
      control: { type: 'number', min: 0, max: 120, step: 4 },
      description: 'Espacio entre ítems en desktop (solo con itemsLayout start).',
    },
    compactBackground: {
      control: 'text',
      description: 'Responsive: fondo del componente (default transparente).',
    },
    compactLabelColor: {
      control: 'color',
      description: 'Responsive: color del texto bajo el ícono.',
    },
  },
  decorators: [
    (Story) => (
      <div style={{ width: '100%', minWidth: 0 }}>
        <Story />
      </div>
    ),
  ],
};

export const Default = {
  args: {
    items: [
      { id: '1', text: 'Actualizar datos', icon: 'heroicons-outline/pencil-square' },
      { id: '2', text: 'Último recibo', icon: 'heroicons-outline/document-arrow-down' },
    ],
    onActionClick: (item) => {
      // eslint-disable-next-line no-console
      console.log('Acción:', item?.text);
    },
  },
};

export const TresAcciones = {
  args: {
    items: [
      { id: '1', text: 'Actualizar datos', icon: 'heroicons-outline/pencil-square' },
      { id: '2', text: 'Último recibo', icon: 'heroicons-outline/document-arrow-down' },
      { id: '3', text: 'Ver legajo', icon: 'heroicons-outline/eye' },
    ],
  },
};

export const ConEnlaces = {
  args: {
    items: [
      {
        id: 'editar',
        text: 'Actualizar datos',
        icon: 'heroicons-outline/pencil-square',
        href: '/personas/1/editar',
      },
      {
        id: 'recibo',
        text: 'Último recibo',
        icon: 'heroicons-outline/document-arrow-down',
        href: '/personas/1/recibo',
        target: '_blank',
      },
    ],
  },
};

export const ItemDeshabilitado = {
  args: {
    items: [
      { id: '1', text: 'Actualizar datos', icon: 'heroicons-outline/pencil-square' },
      { id: '2', text: 'Último recibo', icon: 'heroicons-outline/document-arrow-down', disabled: true },
    ],
  },
};

export const BadgePersonalizado = {
  args: {
    items: [
      {
        id: '1',
        text: 'Prioridad alta',
        icon: 'heroicons-outline/bell-alert',
        badgeBackground: '#7C9CB5',
      },
      {
        id: '2',
        text: 'Último recibo',
        icon: 'heroicons-outline/document-arrow-down',
      },
    ],
  },
};

/** Vista mobile: ícono arriba, texto abajo; sin tarjeta blanca (fondo lo define el host). */
export const Responsive = {
  parameters: {
    viewport: { defaultViewport: 'mobile1' },
    docs: {
      description: {
        story:
          'En viewport ≤ mobileBreakpointPx: layout vertical por ítem, sin borde ni fondo verde/blanco en el componente.',
      },
    },
  },
  decorators: [
    (Story) => (
      <div style={{ width: '100%', maxWidth: 360, padding: 24, background: '#29474C' }}>
        <Story />
      </div>
    ),
  ],
  args: {
    mobileBreakpointPx: 9999,
    compactBackground: 'transparent',
    compactLabelColor: '#FFFFFF',
    items: [
      { id: '1', text: 'Actualizar datos', icon: 'heroicons-outline/pencil-square' },
      { id: '2', text: 'Último recibo', icon: 'heroicons-outline/document-arrow-down' },
    ],
  },
};

export const AnchoContenedor = {
  parameters: {
    docs: {
      description: {
        story: 'El componente ocupa el 100% del ancho del contenedor padre.',
      },
    },
  },
  decorators: [
    (Story) => (
      <div style={{ width: '100%', padding: 16, background: '#f5f5f5' }}>
        <Story />
      </div>
    ),
  ],
  args: {
    items: [
      { id: '1', text: 'Actualizar datos', icon: 'heroicons-outline/pencil-square' },
      { id: '2', text: 'Último recibo', icon: 'heroicons-outline/document-arrow-down' },
    ],
  },
};
