import React from 'react'
import { storiesOf } from '@storybook/react'
import { styled } from 'styleh-components'
import ActionButtonGroup from 'presets/Order/ActionButtonGroup'
import LinkButton from 'presets/Buttons/LinkButton'

/**
 * Action Button Group
 */
const CustomRaisedButton = styled.withComponent(LinkButton) `
  margin-top: 10px;
`
const renderDefaultView = (props, state) => {
  return (
    <React.Fragment>
      <CustomRaisedButton text="Load Form" onClick={state.toggleActive} />
      <CustomRaisedButton text="Cancel" />
    </React.Fragment>
  )
}
storiesOf('presets/Order/ActionButtons', module)
  .add('default', () => <ActionButtonGroup />)
  .add('custom buttons', () => (
    <ActionButtonGroup renderDefaultView={renderDefaultView} />
  ))