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 in `Actions`."
  scope={{ Fieldset, Button }}
  code={`
<Fieldset>
  <Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
  <Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
  <Fieldset.Footer>
    <Fieldset.Footer.Status>
      The Evil Rabbit Jumped over the Fence
    </Fieldset.Footer.Status>
    <Fieldset.Footer.Actions>
      <Button auto size="mini">Actions</Button>
    </Fieldset.Footer.Actions>
  </Fieldset.Footer>
</Fieldset>
`}
/>

<Playground
  title="Custom Text"
  desc="Representation in different situations."
  scope={{ Fieldset, Button, Text }}
  code={`
<Fieldset>
  <Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
  <Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
  <Fieldset.Footer>
    <Fieldset.Footer.Status>
      <Text type="error">An error has occurred.</Text>
    </Fieldset.Footer.Status>
    <Fieldset.Footer.Actions>
      <Button auto size="mini" type="error">Revert</Button>
    </Fieldset.Footer.Actions>
  </Fieldset.Footer>
</Fieldset>
`}
/>

<Playground
  title="Tabs"
  desc="Show multiple Fieldset."
  scope={{ Fieldset, Button }}
  code={`
() => {
  const handler = v => console.log(v)
  return (
    <Fieldset.Group value="two" onChange={handler}>
    <Fieldset label="one">
      <Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
      <Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
      <Fieldset.Footer>
        <Fieldset.Footer.Status>The Evil Rabbit Jumped over the Fence</Fieldset.Footer.Status>
        <Fieldset.Footer.Actions>
          <Button auto size="mini">Actions</Button>
        </Fieldset.Footer.Actions>
      </Fieldset.Footer>
    </Fieldset>
    <Fieldset label="two">
      <Fieldset.Title>The Fence Jumped over The Evil Rabbit</Fieldset.Title>
      <Fieldset.Subtitle>The Fence Jumped over The Evil Rabbit</Fieldset.Subtitle>
      <Fieldset.Footer>
        <Fieldset.Footer.Status>The Fence Jumped over The Evil Rabbit</Fieldset.Footer.Status>
        <Fieldset.Footer.Actions>
          <Button auto size="mini">Actions</Button>
        </Fieldset.Footer.Actions>
      </Fieldset.Footer>
    </Fieldset>
    <Fieldset label="three">
      <Fieldset.Title>The Fence Jumped over The Evil Rabbit</Fieldset.Title>
      <Fieldset.Subtitle>The Fence Jumped over The Evil Rabbit</Fieldset.Subtitle>
      <Fieldset.Footer>
        <Fieldset.Footer.Status>The Fence Jumped over The Evil Rabbit</Fieldset.Footer.Status>
        <Fieldset.Footer.Actions>
          <Button auto size="mini">Actions</Button>
        </Fieldset.Footer.Actions>
      </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 y={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.Footer.Actions.Props</Attributes.Title>

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

<Attributes.Title>Fieldset.Footer.Status.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>
