import { Layout, Playground, Attributes } from 'lib/components'
import { Card, Fieldset, Button, Text, Divider } from 'components'

export const meta = {
  title: 'Fieldset',
  group: 'Surfaces',
}

## Fieldset

Display a collection of related information in a single unit.

<Playground
  title="Basic"
  desc="Add custom buttons."
  scope={{ Fieldset, Button }}
  code={`
<Fieldset>
  <Fieldset.Title>HTTP is simple</Fieldset.Title>
  <Fieldset.Subtitle>HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames. HTTP messages can be read and understood by humans, providing easier testing for developers, and reduced complexity for newcomers.</Fieldset.Subtitle>
  <Fieldset.Footer>
      HTTP Knowledge Base
      <Button auto scale={1/3}>OK</Button>
    </Fieldset.Footer>
  </Fieldset>
`}
/>

<Playground
  title="Custom Text"
  desc="Representation in different situations."
  scope={{ Fieldset, Button, Text }}
  code={`
<Fieldset>
  <Fieldset.Title>HTTP is extensible</Fieldset.Title>
  <Fieldset.Subtitle>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. </Fieldset.Subtitle>
  <Fieldset.Footer>
      <Text type="error">An error has occurred.</Text>
      <Button auto scale={1/3} type="error">Revert</Button>
  </Fieldset.Footer>
</Fieldset>
`}
/>

<Playground
  title="Tabs"
  desc="Show multiple Fieldset."
  scope={{ Fieldset, Button }}
  code={`
() => {
  const handler = v => console.log(v)
  return (
    <Fieldset.Group value="extensible" onChange={handler}>
    <Fieldset label="simple">
      <Fieldset.Title>HTTP is simple</Fieldset.Title>
      <Fieldset.Subtitle>HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames.</Fieldset.Subtitle>
      <Fieldset.Footer>
        HTTP Knowledge Base
        <Button auto scale={1/3}>Actions</Button>
      </Fieldset.Footer>
    </Fieldset>
    <Fieldset label="extensible">
      <Fieldset.Title>HTTP is extensible</Fieldset.Title>
      <Fieldset.Subtitle>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Fieldset.Subtitle>
      <Fieldset.Footer>
      HTTP Knowledge Base
        <Button auto scale={1/3}>Actions</Button>
      </Fieldset.Footer>
    </Fieldset>
    <Fieldset label="stateless">
      <Fieldset.Title>HTTP is stateless</Fieldset.Title>
      <Fieldset.Subtitle>HTTP is stateless: there is no link between two requests being successively carried out on the same connection. </Fieldset.Subtitle>
      <Fieldset.Footer>
        HTTP Knowledge Base
        <Button auto scale={1/3}>Actions</Button>
      </Fieldset.Footer>
    </Fieldset>
    </Fieldset.Group>
  )
}
`}
/>

<Playground
  title="With Divider"
  desc="Use `Divider` and `Fieldset.Content` to combine different layouts."
  scope={{ Fieldset, Divider }}
  code={`
<Fieldset>
  <Fieldset.Content style={{ paddingTop: '10pt', paddingBottom: '10pt' }}>
    <h4>Prerequisites</h4>
  </Fieldset.Content>
  <Divider my={0} />
  <Fieldset.Content>
    <Fieldset.Title>Basic knowledge of HTML and CSS would also be useful.</Fieldset.Title>
    <p>To get the most out of this module, you should have worked your way through the previous JavaScript modules in the series.
    Those modules typically involve simple API usage, as it is often difficult to write client-side JavaScript examples without them. </p>
  </Fieldset.Content>
  <Fieldset.Footer>
    <small>Client-side web APIs</small>
  </Fieldset.Footer>
</Fieldset>
`}
/>

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

| Attribute    | Description                        | Type                     | Accepted values            | Default |
| ------------ | ---------------------------------- | ------------------------ | -------------------------- | ------- |
| **value**    | unique ident value (only in group) | `string`                 | -                          | -       |
| **label**    | group tab text (only in group)     | `string`                 | -                          | -       |
| **title**    | title of fieldset                  | `ReactNode` / `string`   | -                          | -       |
| **subtitle** | subtitle of fieldset               | `ReactNode` / `string`   | -                          | -       |
| ...          | native props                       | `FieldsetHTMLAttributes` | `'name', 'className', ...` | -       |

<Attributes.Title alias="Fieldset.Body">Fieldset.Content.Props</Attributes.Title>

| Attribute | Description  | Type             | Accepted values | Default |
| --------- | ------------ | ---------------- | --------------- | ------- |
| ...       | native props | `HTMLAttributes` | -               | -       |

<Attributes.Title>Fieldset.Footer.Props</Attributes.Title>

| Attribute | Description  | Type             | Accepted values | Default |
| --------- | ------------ | ---------------- | --------------- | ------- |
| ...       | native props | `HTMLAttributes` | -               | -       |

<Attributes.Title>Fieldset.Group.Props</Attributes.Title>

| Attribute    | Description        | Type                      | Accepted values | Default |
| ------------ | ------------------ | ------------------------- | --------------- | ------- |
| **value**    | selected tab value | `string`                  | -               | -       |
| **onChange** | change tab event   | `(value: string) => void` | -               | -       |
| ...          | native props       | `HTMLAttributes`          | -               | -       |

</Attributes>

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