import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { storiesOf } from '@storybook/react'
import Accordion from 'molecules/AccordionBlock'
import { toCommonState } from 'src/state'

const state = toCommonState()

storiesOf('molecules/AccordionBlock', module)
  .add('default', () => <Accordion />)
  .add('Accordion - isDefaultVisible', () => (
    <Accordion isDefaultVisible={true}>
      <h1>eh</h1>
    </Accordion>
  ))
  .add('Accordion - isVisible & activeTitle', () => {
    setInterval(state.toggleVisibility, 5000)
    const ObservedAccordion = observer(props => (
      <Accordion
        isVisible={state.isVisible}
        activeTitle="selected"
        title="not selected"
      >
        <h1>eh</h1>
      </Accordion>
    ))
    return <ObservedAccordion />
  })
  .add('Accordion - state', () => {
    return (
      <Accordion state={state} title={state.value}>
        <h1>state</h1>
      </Accordion>
    )
  })