import { Layout, Playground, Attributes } from 'lib/components'
import { Tabs, Spacer, Link, Text, Button, Code, useTabs } from 'components'
import { useState } from 'react'
import TwitterIcon from '@geist-ui/react-icons/twitter'
import TwitchIcon from '@geist-ui/react-icons/twitch'

export const meta = {
  title: 'tabs',
  group: 'Navigation',
}

## Tabs

Display tab content.

<Playground
  scope={{ Tabs }}
  desc="Toggle display of different templates."
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
  <Tabs.Item label="jumped" value="2">The Fence Jumped over The Evil Rabbit.</Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="Disabled"
  scope={{ Tabs }}
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
  <Tabs.Item label="jumped" value="2" disabled />
</Tabs>
`}
/>

<Playground
  title="Hide Divider"
  scope={{ Tabs }}
  code={`
<Tabs initialValue="html" hideDivider>
  <Tabs.Item label="HTML" value="html">
    <p>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.</p>
  </Tabs.Item>
  <Tabs.Item label="CSS" value="css">
    <p>CSS is the language that we can use to style and lay out our web content,
    as well as adding behavior like animation.</p>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="With Icon"
  desc="Show icon component on label button."
  scope={{ Tabs, TwitchIcon, TwitterIcon, Link, Text }}
  code={`
<Tabs initialValue="1">
  <Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value="1">
    <Text>Hello, this is our live broadcast on Twitch.</Text>
    <Link href="https://github.com/geist-org/react" color rel="nofollow" target="_blank">Click here to visit GitHub repo.</Link>
  </Tabs.Item>
  <Tabs.Item label={<><TwitterIcon/> Twitter </>} value="2">
    <Text>The Components of React looks very cool.</Text>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="Imperatively"
  desc="Control components with imperatively style."
  scope={{ Tabs, Button, Spacer, Code, Text, useState }}
  code={`
() => {
  const [value, setValue] = useState('1')
  const switchHandler = () => setValue('2')
  const changeHandler = val => setValue(val)
  return (
    <>
      <Button size="small" onClick={switchHandler}><Text>Select  <Code>Jumped</Code></Text></Button>
      <Spacer y={.5} />
      <Tabs value={value} onChange={changeHandler}>
        <Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
        <Tabs.Item label="jumped" value="2">The Fence Jumped over The Evil Rabbit.</Tabs.Item>
      </Tabs>
    </>
  )
}
`}
/>

<Playground
  title={
    <>
      with <Code>useTabs</Code>
    </>
  }
  desc="Control components with `hooks`."
  scope={{ Tabs, Button, Spacer, Code, Text, useTabs }}
  code={`
() => {
  const { setState, bindings } = useTabs('1')
  return (
    <>
      <Button size="small" onClick={() => setState('2')}>
        <Text>Select  <Code>Jumped</Code></Text>
      </Button>
      <Spacer y={.5} />
      <Tabs {...bindings}>
        <Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
        <Tabs.Item label="jumped" value="2">The Fence Jumped over The Evil Rabbit.</Tabs.Item>
      </Tabs>
    </>
  )
}
`}
/>

<Attributes edit="/pages/en-us/components/tabs.mdx">
<Attributes.Title>Tabs.Props</Attributes.Title>

| Attribute        | Description            | Type                    | Accepted values                 | Default |
| ---------------- | ---------------------- | ----------------------- | ------------------------------- | ------- |
| **initialValue** | initial value          | `string`                | -                               | -       |
| **value**        | current selected value | `string`                | -                               | -       |
| **hideDivider**  | hide default divider   | `boolean`               | -                               | `false` |
| **onChange**     | change event           | `(val: string) => void` | -                               | -       |
| ...              | native props           | `HTMLAttributes`        | `'alt', 'id', 'className', ...` | -       |

<Attributes.Title alias="Tabs.Tab">Tabs.Item.Props</Attributes.Title>

| Attribute           | Description         | Type      | Accepted values | Default |
| ------------------- | ------------------- | --------- | --------------- | ------- |
| **label**(required) | display tab's label | `string`  | -               | -       |
| **value**(required) | unique ident value  | `string`  | -               | -       |
| **disabled**        | disable current tab | `boolean` | -               | `false` |

<Attributes.Title>useTabs</Attributes.Title>

```ts
type useTabs = (
  initialValue: string,
) => {
  state: string
  setState: Dispatch<SetStateAction<string>>
  currentRef: MutableRefObject<string>
  bindings: {
    value: string
    onChange: (val: string) => void
  }
}
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
