import {
  RecibosPoint,
  RECIBOS_POINT_DEFAULT_ITEMS,
  RECIBOS_POINT_DEFAULT_SECTION_TITLE,
} from './RecibosPoint';

export default {
  title: 'Layout/RecibosPoint',
  component: RecibosPoint,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
    backgrounds: {
      default: 'light',
      values: [
        { name: 'light', value: '#F5F5F5' },
        { name: 'white', value: '#FFFFFF' },
      ],
    },
  },
  decorators: [
    (Story) => (
      <div style={{ width: '100%', minWidth: 0, padding: '16px', boxSizing: 'border-box' }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
    sectionTitle: { control: 'text' },
    showSectionTitle: { control: 'boolean' },
    containerBackgroundColor: { control: 'color' },
    containerPadding: { control: 'text' },
    onItemViewClick: { action: 'view' },
    onItemDownloadClick: { action: 'download' },
    linkComponent: { control: false },
    listGap: { control: { type: 'number', min: 0, max: 32 } },
    mobileBreakpointPx: { control: { type: 'number', min: 320, max: 1200 } },
    showViewAction: { control: 'boolean' },
    showDownloadAction: { control: 'boolean' },
    loading: {
      control: 'boolean',
      description: 'true: skeleton fijo (3 filas), sin importar items',
    },
  },
};

export const Default = {
  args: {
    sectionTitle: RECIBOS_POINT_DEFAULT_SECTION_TITLE,
    containerBackgroundColor: '#F5F5F5',
    items: RECIBOS_POINT_DEFAULT_ITEMS,
    loading: false,
  },
};

export const Cargando = {
  args: {
    sectionTitle: RECIBOS_POINT_DEFAULT_SECTION_TITLE,
    containerBackgroundColor: '#FFFFFF',
    loading: true,
    items: RECIBOS_POINT_DEFAULT_ITEMS,
  },
  parameters: {
    docs: {
      description: {
        story: 'Con loading=true siempre se muestran 3 filas skeleton, aunque items tenga datos.',
      },
    },
  },
};

export const CargandoSinItems = {
  args: {
    sectionTitle: RECIBOS_POINT_DEFAULT_SECTION_TITLE,
    containerBackgroundColor: '#FFFFFF',
    loading: true,
    items: [],
  },
};

export const ConNavegacion = {
  args: {
    containerBackgroundColor: '#F5F5F5',
    items: RECIBOS_POINT_DEFAULT_ITEMS.map((item) => ({
      ...item,
      viewHref: `/documentos/${item.id}/ver`,
      downloadHref: `/documentos/${item.id}/descargar`,
    })),
  },
};

export const UnSoloItem = {
  args: {
    containerBackgroundColor: '#F5F5F5',
    items: [RECIBOS_POINT_DEFAULT_ITEMS[0]],
  },
};
