import { TitleBar, TitleBarIcon, TitleBarLink } from 'hexagon-react'

const example = <TitleBar title="Hexagon React" subtitle="Subtitle">
  <TitleBarIcon iconClass="fa fa-tags">Tags</TitleBarIcon>
  <TitleBarIcon iconClass="fa fa-life-ring">Help</TitleBarIcon>
  <TitleBarIcon iconClass="fa fa-cog">Settings</TitleBarIcon>
  <TitleBarIcon iconClass="fa fa-power-off">Sign out</TitleBarIcon>
  <TitleBarLink href="link-1">Link 1</TitleBarLink>
  <TitleBarLink href="link-2">Link 2</TitleBarLink>
  <TitleBarLink href="link-3">Link 3</TitleBarLink>
  <TitleBarLink href="link-4">Link 4</TitleBarLink>
</TitleBar>

import { Button } from 'hexagon-react'

const example = <div>
  <Button>Default Button</Button>
  <Button context="action">Action Button</Button>
  <Button context="positive">Positive Button</Button>
  <Button context="warning">Warning Button</Button>
  <Button context="negative">Negative Button</Button>
  <Button context="info">Info Button</Button>
  <Button context="contrast">Contrast Button</Button>
  <Button context="compliment">Compliment Button</Button>
  <Button disabled={true}>Disabled Button</Button>
</div>

import { Label } from 'hexagon-react'

const example = <div>
  <Label>Default Label</Label>
  <Label context="action">Action Label</Label>
  <Label context="positive">Positive Label</Label>
  <Label context="warning">Warning Label</Label>
  <Label context="negative">Negative Label</Label>
  <Label context="info">Info Label</Label>
  <Label context="contrast">Contrast Label</Label>
  <Label context="compliment">Compliment Label</Label>
  <Label disabled={true}>Disabled Label</Label>
</div>

import { Spinner } from 'hexagon-react'

const example = <Spinner/>

import { SpinnerWide } from 'hexagon-react'

const example = <SpinnerWide/>

import { Button } from 'hexagon-react'

function showModal () {
  const modal = new hx.Modal('Modal Title', (node) => {
    hx.select(node).text('Modal Text')
  })
  modal.show()
}

const example = <Button context="action" onClick={showModal}>Show Modal</Button>

import { Button } from 'hexagon-react'

function showNotification () {
  hx.notify('Hello')
}

const example = <Button context="action" onClick={showNotification}>Show Notification</Button>

import { Tree } from 'hexagon-react'

const treeRenderer = (elem, data) => {
  hx.select(elem).text(data.name)
}

const treeData = [
  {
    name: 'Parent 1',
    children: [
      {
        name: 'Item 1'
      },
      {
        name: 'Parent 2',
        children: [
          {
            name: 'Item 2'
          }
        ]
      }
    ]
  }
]

const example = <Tree items={treeData} renderer={treeRenderer}></Tree>

import { Picker } from 'hexagon-react'

const example = <Picker items={['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Other']} value="Option 1"></Picker>

import { InputGroup, Picker, Button } from 'hexagon-react'

const example = <InputGroup>
  <input/>
  <Picker context="action" items={['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Other']} value="Option 1"></Picker>
  <Button context="action">Go!</Button>
</InputGroup>

import { ProgressBar } from 'hexagon-react'

const example = <div>
  <ProgressBar context="info" value={0.5}/>
  <br/>
  <ProgressBar context="action" value={0.15}/>
  <br/>
  <ProgressBar context="negative" value={0.25}/>
  <br/>
  <ProgressBar context="positive" value={0.75}/>
</div>

import { Collapsible } from 'hexagon-react'

const example = <Collapsible title="Title">
  <div style={{padding: '1em', fontSize: '2em'}}>Content</div>
</Collapsible>

import { NumberPicker } from 'hexagon-react'

const example = <div>
  <NumberPicker></NumberPicker>
  <NumberPicker context="action"></NumberPicker>
  <NumberPicker context="positive"></NumberPicker>
  <NumberPicker context="warning"></NumberPicker>
  <NumberPicker context="negative"></NumberPicker>
  <NumberPicker context="info"></NumberPicker>
  <NumberPicker context="contrast"></NumberPicker>
  <NumberPicker context="compliment"></NumberPicker>
  <NumberPicker min={5} max={10} value={7}></NumberPicker>
  <NumberPicker disabled={true}></NumberPicker>
</div>

import { Group, Section } from 'hexagon-react'

const example = <div className="docs-layout-demo">
  <Group direction="horizontal">
    <Section></Section>
    <Group direction="vertical">
      <Section></Section>
      <Section></Section>
      <Group direction="horizontal">
        <Section></Section>
        <Section></Section>
      </Group>
    </Group>
    <Section></Section>
    <Section></Section>
  </Group>
</div>

import { ButtonGroup } from 'hexagon-react'

const example = <ButtonGroup items={['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Other']} value="Option 2"/>

import { DatePicker } from 'hexagon-react'

const example = <DatePicker date={new Date(Date.now() - 24 * 60 * 60 * 1000)}/>

import { TimePicker } from 'hexagon-react'

const example = <TimePicker/>

import { DateTimePicker } from 'hexagon-react'

const example = <DateTimePicker/>

import { ColorPicker } from 'hexagon-react'

const example = <div>
  <ColorPicker/>
  <ColorPicker value="#448877"/>
</div>

import { Toggle } from 'hexagon-react'

const example = <div>
  <Toggle/>
  <Toggle value={true}/>
</div>

import { PivotTable } from 'hexagon-react'

const pivotTableData = {
  topHead: [
    'Head 1',
    'Head 2',
    'Head 3'
  ],
  leftHead: [
    'Head 1',
    'Head 2',
    'Head 3'
  ],
  body: [
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ],
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ],
    [
      'Cell 1',
      'Cell 2',
      'Cell 3'
    ]
  ]
}

const example = <PivotTable data={pivotTableData}/>

import { TagInput } from 'hexagon-react'

const example = <TagInput items={['tag-1', 'tag-2', 'tag-3']}/>

import { AutoComplete } from 'hexagon-react'

const autocompleteData = [
  'Bob',
  'Dave',
  'Steve',
  'Kate',
  'Bill',
  'Alejandro'
]

const example = <AutoComplete data={autocompleteData}/>

import { Slider } from 'hexagon-react'

const example = <Slider/>

import { TimeSlider } from 'hexagon-react'

const example = <TimeSlider/>

import { DataTable } from 'hexagon-react'

const feed = hx.dataTable.objectFeed({
  headers: [
    { name: 'Name', id: 'name' },
    { name: 'Age', id: 'age' },
    { name: 'Profession', id: 'profession' }
  ],
  rows: [
    { id: 0, cells: { 'name': 'Bob', 'age': 25, 'profession': 'Developer' } },
    { id: 1, cells: { 'name': 'Jan', 'age': 41, 'profession': 'Artist' } },
    { id: 2, cells: { 'name': 'Dan', 'age': 41, 'profession': 'Builder' } }
  ]
})

const example = <DataTable feed={feed} selectEnabled={true}/>