import React, { useEffect, useState } from 'react'

import { ComponentStory, ComponentMeta } from '@storybook/react'

import { ECommerce } from '../components'

import {
  getCategories,
  getProducts
} from '../components/ECommerce/ECommerce.helpers'

export default {
  title: 'Modules/ECommerce',
  component: ECommerce
} as ComponentMeta<typeof ECommerce>

const Template: ComponentStory<typeof ECommerce> = args => {
  const [categories, setCategories] = useState([])
  const [products, setProducts] = useState([])

  useEffect(() => {
    const setup = async () => {
      const _categories = await getCategories()
      const _products = await getProducts()

      setCategories(_categories)
      setProducts(_products)
    }

    setup()
  }, [])

  return <ECommerce {...args} categories={categories} products={products} />
}

export const Element = Template.bind({})

Element.args = {
  catalogue_id: 'SvSjXiSgNqMrSNL9xt62'
}
