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: '导航',
}

## Tabs / 选项卡

显示选项卡的内容。

<Playground
  scope={{ Tabs }}
  desc="切换显示不同的内容。"
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="二进制" value="1">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>
  <Tabs.Item label="八进制" value="2">八进制表示为开头是0后接大写或小写的O（0o或0O）。</Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="禁用"
  scope={{ Tabs }}
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="二进制" value="1">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>
  <Tabs.Item label="八进制" value="2" disabled />
</Tabs>
`}
/>

<Playground
  title="隐藏分割线"
  scope={{ Tabs }}
  code={`
<Tabs initialValue="html" hideDivider>
  <Tabs.Item label="HTML" value="html">
    <p>HTML 是我们用来构造网站内容的不同部分并定义它们的意义或目的的语言。</p>
  </Tabs.Item>
  <Tabs.Item label="CSS" value="css">
    <p>我们可以使用 CSS 这个语言来设计和布局我们的 Web 内容，以及添加像动画一类的行为。</p>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="图标"
  desc="在选项卡的标签上显示图标组件。"
  scope={{ Tabs, TwitterIcon, TwitchIcon, Link, Text }}
  code={`
<Tabs initialValue="1">
  <Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value="1">
    <Text>你好，这是我们在 Twitch 的最新直播。</Text>
    <Link href="https://github.com/geist-org/react" color rel="nofollow" target="_blank">点击这里浏览 GitHub 项目</Link>
  </Tabs.Item>
  <Tabs.Item label={<><TwitterIcon /> Twitter </>} value="2">
    <Text>这个组件看起来还不错。</Text>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="命令式"
  desc="以命令式的风格控制选项卡组件。"
  scope={{ Tabs, Button, Spacer, useState }}
  code={`
() => {
  const [value, setValue] = useState('1')
  const switchHandler = () => setValue('2')
  const changeHandler = val => setValue(val)
  return (
    <>
      <Button size="small" onClick={switchHandler} auto>选择八进制</Button>
      <Spacer />
      <Tabs value={value} onChange={changeHandler}>
        <Tabs.Item label="二进制" value="1">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>
        <Tabs.Item label="八进制" value="2">八进制表示为开头是0后接大写或小写的O（0o或0O）。</Tabs.Item>
      </Tabs>
    </>
  )
}
`}
/>

<Playground
  title={
    <>
      与&nbsp;<Code>useTabs</Code>&nbsp;组合
    </>
  }
  desc="使用 `hooks` 以更简单的方式控制选项卡。"
  scope={{ Tabs, Button, Spacer, useTabs }}
  code={`
() => {
  const { setState, bindings } = useTabs('1')
  return (
    <>
      <Button size="small" onClick={() => setState('2')} auto>选择八进制</Button>
      <Spacer />
      <Tabs {...bindings}>
        <Tabs.Item label="二进制" value="1">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>
        <Tabs.Item label="八进制" value="2">八进制表示为开头是0后接大写或小写的O（0o或0O）。</Tabs.Item>
      </Tabs>
    </>
  )
}
`}
/>

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

| 属性             | 描述           | 类型                    | 推荐值                          | 默认    |
| ---------------- | -------------- | ----------------------- | ------------------------------- | ------- |
| **initialValue** | 初始值         | `string`                | -                               | -       |
| **value**        | 设定当前选项   | `string`                | -                               | -       |
| **hideDivider**  | 隐藏默认分割线 | `boolean`               | -                               | `false` |
| **onChange**     | 选项卡切换事件 | `(val: string) => void` | -                               | -       |
| ...              | 原生属性       | `HTMLAttributes`        | `'alt', 'id', 'className', ...` | -       |

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

| 属性              | 描述           | 类型      | 推荐值 | 默认    |
| ----------------- | -------------- | --------- | ------ | ------- |
| **label**(必须的) | 选项卡标签文字 | `string`  | -      | -       |
| **value**(必须的) | 唯一鉴别值     | `string`  | -      | -       |
| **disabled**      | 禁用当前选项卡 | `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>
