/*
 * Copyright (c) 2018-present, Revolut LTD.
 *
 * This source code is licensed under the Apache 2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import * as React from 'react'
import { action } from '@storybook/addon-actions'

import { boolean, text, select, withKnobs } from '@storybook/addon-knobs'

import { Checkbox } from './'

class Container extends React.Component<any, any> {
  constructor({ checked = false, ...props }) {
    super({ ...props, checked })
    this.state = {
      checked: checked,
    }
  }

  handleChange = (_, checked) => {
    this.setState({
      checked,
    })
  }

  render() {
    return this.props.render({
      handleChange: this.handleChange,
      checked: this.state.checked,
    })
  }
}

const typeOptions = {
  checkbox: 'checkbox',
  switcher: 'switcher',
  wrong: `wrong - have to render fallback 'checkbox'`,
}

export const NoContainer = () => {
  const types = select('type', typeOptions, typeOptions.checkbox)
  return (
    <Checkbox
      label={text('label', 'Add burger')}
      onChange={action('onChange')}
      checked={boolean('checked', false)}
      disabled={boolean('disabled', false)}
      indeterminate={boolean('indeterminate', false)}
      type={types}
      value={text('value', 'food')}
    />
  )
}

export const InContainer = () => (
  <Container
    render={({ handleChange, checked }) => {
      const types = select('type', typeOptions, typeOptions.checkbox)
      return (
        <Checkbox
          label={text('label', 'Add burger')}
          onChange={handleChange}
          checked={boolean('checked', checked)}
          disabled={boolean('disabled', false)}
          indeterminate={boolean('indeterminate', false)}
          type={types}
        />
      )
    }}
  />
)

export const customLabel = () => (
  <Container
    render={({ handleChange, checked }) => {
      const types = select('type', typeOptions, typeOptions.checkbox)
      return (
        <Checkbox
          onChange={handleChange}
          checked={boolean('checked', checked)}
          disabled={boolean('disabled', false)}
          type={types}
          value={text('value', 'food')}
          name={text('name', 'pizza')}
          indeterminate={boolean('indeterminate', false)}
          label="Render pizza with cheddar"
          renderLabelContent={({ label }) => (
            <span>
              {label}
              🧀
            </span>
          )}
        />
      )
    }}
  />
)

export const switcher = () => (
  <div style={{ width: '150px' }}>
    <Container
      render={({ handleChange, checked }) => (
        <Checkbox
          label={text('label', 'VPN')}
          type="switcher"
          onChange={handleChange}
          disabled={boolean('disabled', false)}
          checked={boolean('checked', checked)}
          indeterminate={boolean('indeterminate', false)}
          value={text('value', 'VPN')}
          name={text('name', 'VPN')}
        />
      )}
    />
  </div>
)

export const switcherInText = () => (
  <div style={{ background: '#2d353c', width: '300px' }}>
    <Container
      render={({ handleChange, checked }) => (
        <div style={{ color: '#aeccfd' }}>
          <span>Render pizza with cheddar </span>
          <Checkbox
            label={text('label', 'VPN')}
            type="switcher"
            onChange={handleChange}
            disabled={boolean('disabled', false)}
            checked={boolean('checked', checked)}
            indeterminate={boolean('indeterminate', false)}
            value={text('value', 'VPN')}
            name={text('name', 'VPN')}
            // @ts-ignore
            style={{ display: 'inline-block' }}
          />
        </div>
      )}
    />
  </div>
)

export const usingRenderPropsCustomRender = () => (
  <Container
    render={({ handleChange: containerHandleChange, checked }) => (
      <Checkbox
        onChange={containerHandleChange}
        render={({ handleChange }) => {
          const handleClick = e => handleChange(e, !checked)

          return (
            <React.Fragment>
              <input
                type="radio"
                value="on"
                name="on1"
                checked={boolean('checked', checked)}
                onClick={handleClick}
                disabled={boolean('disabled', false)}
              />
              <label role="presentation" onKeyPress={handleClick}>
                {checked ? `On` : `Off`}
              </label>
            </React.Fragment>
          )
        }}
      />
    )}
  />
)

export const usingRenderProps = () => (
  <div style={{ width: '150px' }}>
    <Container
      render={({ handleChange: containerHandleChange, checked }) => (
        <Checkbox
          checked={checked}
          label="Label text"
          onChange={containerHandleChange}
          render={({ handleChange, id, renderLabelContent }) => {
            const handleClick = e => handleChange(e, !checked)
            const types = {
              radio: 'radio',
              checkbox: 'checkbox',
            }

            return (
              <React.Fragment>
                <input
                  type={select('type', types, types.radio)}
                  value="on"
                  id={id}
                  name="on2"
                  checked={boolean('checked', checked)}
                  onClick={handleClick}
                  disabled={boolean('disabled', false)}
                />
                <Checkbox.CheckboxLabel
                  // @ts-ignore
                  htmlFor={id}
                >
                  Label sub component{' '}
                </Checkbox.CheckboxLabel>
                {renderLabelContent({ label: 'LabelComponent prop' })}
              </React.Fragment>
            )
          }}
        />
      )}
    />
  </div>
)

export default {
  title: 'Checkbox',
  component: Checkbox,
  decorators: [withKnobs],
}