import { Layout, Playground, Attributes } from 'lib/components'
import { Rating, Grid, Spacer } from 'components'
import { useState } from 'react'
import { Award, Github } from '@geist-ui/react-icons'

export const meta = {
  title: 'Rating',
  group: 'Feedback',
}

## Rating

Display an indicator of rankings with stars.

<Playground
  title="Default"
  desc="A default rating component with initializers and callbacks."
  scope={{ Rating, Grid, useState }}
  code={`
() => {
  const [value, setValue] = useState(1)
  const [locked, setLocked] = useState(false)
  return(
    <Grid.Container gap={2}>
      <Grid xs={24} md={8} justify="center">
        <Rating onLockedChange={setLocked} value={value} onValueChange={setValue}/>
      </Grid>
      <Grid xs={12} md={8} justify="center">Selection: {value}</Grid>
      <Grid xs={12} md={8} justify="center">Locked: {locked ? "true" : "false"}</Grid>
    </Grid.Container>
  )
}
`}
/>

<Playground
  title="Types"
  desc="Pass the property `type` to the Rating component."
  scope={{ Rating, Grid }}
  code={`
<Grid.Container gap={2} justify="center">
  <Grid xs={24} sm={24} md={8} justify="center"><Rating type="success"/></Grid>
  <Grid xs={24} sm={12} md={8} justify="center"><Rating type="error"/></Grid>
  <Grid xs={24} sm={12} md={8} justify="center"><Rating type="warning"/></Grid>
</Grid.Container>
`}
/>

<Playground
  title="Custom Amount"
  desc="Customize the amount of stars."
  scope={{ Rating, Spacer }}
  code={`
<>
  <Rating count={2} />
  <Spacer h={0.5} />
  <Rating value={3} count={6} />
  <Spacer h={0.5} />
  <Rating value={4} count={8}/>
</>
`}
/>

<Playground
  title="Icon"
  desc="Customize the icons of a rating."
  scope={{ Rating, Award, Github, Spacer }}
  code={`
<>
  <Rating
     value={4}
     count={6}
     type="success"
     icon={<Github />} />
  <Spacer h={0.5} />
  <Rating count={7}  type="error" icon={<Award />} />
</>
`}
/>

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

| Attribute          | Description         | Type                    | Accepted values             | Default   |
| ------------------ | ------------------- | ----------------------- | --------------------------- | --------- |
| **type**           | rating type         | `RatingTypes`           | [RatingTypes](#ratingtypes) | `default` |
| **icon**           | custom icon         | `JSX.Element`           | -                           | -         |
| **count**          | rating star count   | `number`                | [RatingCount](#ratingcount) | `5`       |
| **value**          | star values         | `number`                | [RatingValue](#ratingvalue) | -         |
| **initialValue**   | initial star values | `number`                | [RatingValue](#ratingvalue) | `1`       |
| **onValueChange**  | value change event  | `(value?: any) => void` | -                           | -         |
| **locked**         | lock state          | `boolean`               | -                           | `false`   |
| **onLockedChange** | locked change event | `(value?: any) => void` | -                           | -         |
| ...                | native props        | `HTMLAttributes`        | -                           | -         |

<Attributes.Title>RatingTypes</Attributes.Title>

```ts
type RatingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```

<Attributes.Title>RatingCount</Attributes.Title>

```ts
type RatingCount = 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
```

<Attributes.Title>RatingValue</Attributes.Title>

```ts
type RatingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
```

</Attributes>

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