import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { toBoolean } from 'exotic'
import { Value } from '../typings'
import { InputProps } from '../inputs/typings'
import { InputState } from '../inputs/InputState'
// import { ObserverInput } from '../inputs/ObserverInput'

// @todo
import { styled } from 'styleh-components'
import { ToggleItem } from '@skava/ui'
const StyledLabel = styled.label`
  user-select: none;
`
const StyledToggleItem = styled(ToggleItem)`
  svg {
    height: rem(20);
    width: rem(20);
    border-radius: rem(5);
  }
`

@observer
class TogglePlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['toggle', 'checkbox', 'radio'].includes(props.type)
  }

  // used by state
  static defaultState = (inputState: InputState) => {
    return {
      tooltip: 'to do, or not to do?',
      serializer: (state: InputState) => {
        return {
          [inputState.propertyName]: toBoolean(inputState.value),
        }
      },
      validator: (value: Value) => false,
    }
  }

  handleClick = (event?: any) => {
    const { state } = this.props
    state.setIsSelected(!state.isSelected)
  }
  render() {
    const { state, ...remainingProps } = this.props
    const title = 'radio list title'

    // return <ObserverInput {...this.props} type="checkbox" />
    return (
      <>
        <StyledToggleItem
          id={state.identifier}
          isSelected={state.isSelected}
          onClick={this.handleClick}
        />
        <StyledLabel htmlFor={state.identifier} onClick={this.handleClick}>
          {title}
        </StyledLabel>
      </>
    )
  }
}

export { TogglePlugin }
export default TogglePlugin