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

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

## Tabs

Display tab content.

The Tabs contain an additional Hooks, see subsection [useTabs](/en-us/hooks/use-tabs) for details.

<Playground
  scope={{ Tabs }}
  desc="Toggle display of different templates."
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
  <Tabs.Item label="proxies" value="2">Between the Web browser and the server, numerous computers and machines relay the HTTP messages.</Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="Disabled"
  scope={{ Tabs }}
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
  <Tabs.Item label="jumped" value="2" disabled />
</Tabs>
`}
/>

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

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

<Playground
  title="With Icon"
  desc="Show icon component on label button."
  scope={{ Tabs, TwitchIcon, TwitterIcon, Text }}
  code={`
<Tabs initialValue="1" align="center" leftSpace={0}>
 <Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value="1">
    <Text mt={0}>Hello, this is our live broadcast on Twitch.</Text>
  </Tabs.Item>
  <Tabs.Item label={<><TwitterIcon/> Twitter </>} value="2">
    <Text mt={0}>The Components of React looks very cool.</Text>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="Scroll Behavior"
  desc="If all tabs cannot fit in the width then then hidden tabs can be accessed through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)"
  scope={{ Tabs, TwitchIcon, TwitterIcon, Text }}
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="Home" value="1">
    <Text>Hello!</Text>
  </Tabs.Item>
  <Tabs.Item label="About" value="2">
    <Text>Cool stuff.</Text>
  </Tabs.Item>
  <Tabs.Item label="About Us" value="3">
    <Text>Good people.</Text>
  </Tabs.Item>
  <Tabs.Item label="Features" value="4">
    <Text>Amazing.</Text>
  </Tabs.Item>
  <Tabs.Item label="Pricing" value="5">
    <Text>Very low.</Text>
  </Tabs.Item>
  <Tabs.Item label="Docs" value="6">
    <Text>Clear.</Text>
  </Tabs.Item>
  <Tabs.Item label="Profile" value="7">
    <Text>Extraordinary person.</Text>
  </Tabs.Item>
  <Tabs.Item label="Settings" value="8">
    <Text>Easy to tweak.</Text>
  </Tabs.Item>
  <Tabs.Item label="Dashboard" value="9">
    <Text>Charts.</Text>
  </Tabs.Item>
  <Tabs.Item label="Policies" value="10">
    <Text>Privacy focused.</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 scale={1/3} font="12px" onClick={switchHandler}><Text>Select <Code>Extensible</Code></Text></Button>
      <Spacer h={.5} />
      <Tabs value={value} onChange={changeHandler}>
        <Tabs.Item label="stateless" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
        <Tabs.Item label="extensible" value="2">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</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` |
| **hideBorder**       | hide border on active                   | `boolean`               | -                               | `false` |
| **leftSpace**        | space area on the left side             | `CSSProperties`         | -                               | `12px`  |
| **onChange**         | change event                            | `(val: string) => void` | -                               | -       |
| **align**            | horizontal alignment of each child item | `justifyContent`        | -                               | `left`  |
| **activeClassName**  | className of active child item          | `string`                | -                               | -       |
| **activeStyles**     | style of active child item              | `object`                | -                               | -       |
| **hoverHeightRatio** | height percentage of highlight block    | `number`                | -                               | 0.7     |
| **hoverWidthRatio**  | width percentage of highlight block     | `number`                | -                               | 1.15    |
| ...                  | 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>

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