import React from 'react'
import withDesignTokens from 'addons/tokens/index.js'
import { Stories } from '@storybook/addon-docs'
import { DocStoryList, DocStoryContainer, FlexCell, FlexList } from '../../../docs/blocks/index'
import { Button, ButtonGroup } from '../lib/index'

const StoryList = () => (
  <DocStoryList stories={<Stories includePrimary={true} title="ButtonGroup" />} />
)

export default {
  component: ButtonGroup,
  decorators: [withDesignTokens],
  parameters: {
    controls: { hideNoControlsWarning: true },
    docs: {
      page: StoryList,
    },
    previewTabs: {
      canvas: { hidden: true },
      'storybook/docs/panel': { hidden: true },
    },
  },
  title: 'FORM COMPONENTS/ButtonGroup/Code Examples',
}

const Template = () => {
  return (
    <DocStoryContainer title="ButtonGroup Sandbox">
      <FlexList>
        <FlexCell
          codeImport={`import { Button, ButtonGroup } from '@kyper/button'`}
          codeViewer="always"
        >
          <ButtonGroup>
            <Button variant="transparent-tertiary">Cancel</Button>
            <Button variant="primary">Apply</Button>
          </ButtonGroup>
        </FlexCell>
      </FlexList>
    </DocStoryContainer>
  )
}

export const ButtonGroupSandbox = Template.bind({})
ButtonGroupSandbox.storyName = 'Sandbox'
ButtonGroupSandbox.argTypes = {
  children: { table: { disable: true } },
}
