import { type TilesProps } from '../Tiles/Tiles/Tiles'
import { toast } from '../Toast/Toast'

export const tileHeader = {
  imgUrl: `https://picsum.photos/id/1/50/50`,
  title: 'Header Title',
  subtitle: 'Header Subtitle',
}

export const tileBody =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
export const tileSubHeader = 'Subheader'

export const createTileMenuProps = (): TilesProps['tiles'][0]['menuProps'] => ({
  actions: [
    {
      text: 'Item 1',
      icon: 'check',
      callout: () => toast({ type: 'success', message: 'Item 1 clicked' }),
    },
    {
      text: 'Item 2',
      icon: 'info',
      callout: () => toast({ type: 'success', message: 'Item 2 clicked' }),
    },
    {
      text: 'Item 3',
      icon: 'flag',
      callout: () => toast({ type: 'success', message: 'Item 3 clicked' }),
    },
  ],
})

export const createTileButtons = (): TilesProps['tiles'][0]['buttons'] => [
  {
    children: 'Button 1',
    onClick: () => toast({ type: 'success', message: 'Button 1 clicked' }),
  },
  {
    children: 'Button 2',
    styleType: 'primary',
    onClick: () => toast({ type: 'success', message: 'Button 2 clicked' }),
  },
]

export const generateTiles = (count: number): TilesProps['tiles'] => {
  return Array.from({ length: count }, (_, index) => ({
    header: {
      title: `Tile ${index + 1}`,
      subtitle: `Subtitle ${index + 1}`,
      imgUrl: `https://picsum.photos/id/${index + 1}/50/50`,
    },
    id: `tile-${index + 1}`,
    subHeader: `Subheader ${index + 1}`,
    body: tileBody,
    menuProps: createTileMenuProps(),
    buttons: createTileButtons(),
  }))
}