import React from 'react'

import Checkbox from 'playbook-ui'

const CheckboxDefault = (props) => {
  return (
    <div>
      <Checkbox
          name="default name"
          tabIndex={0}
          text="Checkbox label"
          value="default value"
      />
    </div>
  )
}

export default CheckboxDefault

import React from 'react'

import Checkbox from 'playbook-ui'

const CheckboxChecked = (props) => {
  return (
    <div>
      <Checkbox
          checked
          name="checkbox-name"
          text="Checked Checkbox"
          value="check-box value"
      />
    </div>
  )
}

export default CheckboxChecked

import React, { useState } from 'react'

import Checkbox from 'playbook-ui'

const CheckboxCustom = (props) => {
  const [checked, setChecked] = useState(false)

  const handleOnChange = () => {
    setChecked(!checked)
  }

  return (
    <div>
      {`The checkbox is ${checked ? 'checked' : 'unchecked'}.`}
      <br />
      <br />
      <div>
        <Checkbox
            text="Toggle Me"
        >
          <input
              checked={checked}
              name="custom-name"
              onChange={handleOnChange}
              type="checkbox"
              value="custom-value"
          />
        </Checkbox>
      </div>
    </div>
  )
}

export default CheckboxCustom

import React from 'react'
import { Checkbox } from 'playbook-ui'

const CheckboxError = (props) => {
  return (
    <div>
      <Checkbox
          error
          name="default name"
          text="Checkbox label"
          value="default value"
      />
    </div>
  )
}

export default CheckboxError

import React, { useState } from 'react'
import { Checkbox, Table } from 'playbook-ui'

const CheckboxIndeterminate = (props) => {
  const [checkboxes, setCheckboxes] = useState([
    { name: 'Coffee', checked: false },
    { name: 'Ice Cream', checked: false },
    { name: 'Chocolate', checked: true },
  ])

  const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked)
  const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked)

  const processCheckboxes = (checked) =>
    checkboxes.slice(0).map((checkbox) => {
      checkbox.checked = checked
      return checkbox
    })

  const onToggleAll = () => {
    setCheckboxes(
      isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
    )
  }

  const updateCheckboxes = (checkbox, index) => {
    const newCheckboxes = checkboxes.slice(0)
    newCheckboxes[index].checked = !checkbox.checked
    setCheckboxes(newCheckboxes)
  }

  return (
    <Table
        container={false}
        size="md"
    >
      <thead>
        <tr>
          <th>
            <Checkbox
                checked={isAllChecked}
                indeterminate={!isAllChecked && !isNoneChecked}
                name="checkbox-name"
                onChange={onToggleAll}
                text={isNoneChecked ? 'Check All' : 'Uncheck All'}
                value="check-box value"
            />
          </th>
        </tr>
      </thead>
      <tbody>
        {checkboxes.map((checkbox, index) => (
          <tr key={index}>
            <td>
              <Checkbox
                  checked={checkbox.checked}
                  name={checkbox.name}
                  onChange={() => {
                    updateCheckboxes(checkbox, index)
                  }}
                  text={checkbox.name}
                  value="check-box value"
              />
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  )
}

export default CheckboxIndeterminate