import type { Meta, StoryObj } from '@storybook/react'
import React from 'react'
import { Wishlists, WishlistItem } from './Wishlists.component'
import { IWishlists } from './Wishlists.interface'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
    title: 'Backlog/Wishlist',
    component: Wishlists
} as Meta


const imageElement = <img
    width="100%"
    height="100%"
    sizes="100vw"
    decoding="async"
    src="https://1122687140.rsc.cdn77.org/images/block1_651.jpg?1632156039"
    alt="Empty state" />

export const Simple: StoryObj<Partial<IWishlists>> = {
    render: args => (
        <div style={{ display: 'grid', padding: '16px' }}>
            <Wishlists wishlists={args.wishlists}>
            </Wishlists>
        </div>
    ),
    args: {
        wishlists: [
            {
                wishName: 'Business palace Porto',
                productList: [
                    {
                        title: 'Business',
                        quantity: 2,
                        imageElement
                    },

                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                ]
            },
            {
                wishName: 'Moradia Lisboa 2',
                productList: [
                    {
                        title: 'Business',
                        quantity: 2,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                    ,
                    {
                        title: 'Business 2',
                        quantity: 5,
                        imageElement
                    }
                ]
            }
        ]
    }
}