import React, { useState } from 'react'
import { Meta, StoryObj } from '@storybook/react'
import {
  ProductAvatarGroup,
  ProductAvatarItem
} from './ProductAvatar.component'
import { IProductAvatar } from './ProductAvatar.interface'

export default {
  title: 'Backlog/ProductAvatar',
  component: ProductAvatarItem,
  args: {}
} as Meta

export const Simple: StoryObj<Partial<IProductAvatar>> = {
  render: args => {
    const [isSelected, setSelected] = useState(false)
    const handlerClick = () => {
      setSelected(!isSelected)
    }

    return (
      <ProductAvatarGroup style={{ width: '320px' }}>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={isSelected}
          onClick={handlerClick}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={true}
          onClick={handlerClick}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
        <ProductAvatarItem
          picture={'/assets/product.jpeg'}
          title={'selected'}
          selected={false}
          onClick={() => alert('helllooooo')}
        ></ProductAvatarItem>
      </ProductAvatarGroup>
    )
  }
}