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 { Toggle } from '@skava/ui'
export const StyledLabel = styled.label`
  user-select: none;
  display: inline-flex;
  flex-basis: 70%;
  align-self: center;
`
/**
 * @see https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
 */
export const StyledToggle = styled(Toggle)`
  && {
    align-self: center;
    display: inline-flex;
  }
  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),
        }
      },

      // how can it be wrong unless this is an `i agree`
      validator: (value: Value) => true,
    }
  }

  handleClick = (event?: any) => {
    const { state } = this.props
    state.setIsSelected(!state.isSelected)
  }
  renderLabel = () => {
    const { state } = this.props
    const { label } = state

    return (
      <StyledLabel htmlFor={state.identifier} onClick={this.handleClick}>
        {label}
      </StyledLabel>
    )
  }
  render() {
    const { state, className, ...remainingProps } = this.props

    // return <ObserverInput {...this.props} type="checkbox" />
    return (
      <StyledToggle
        className={className}
        iconType={state.type}
        id={state.identifier}
        isSelected={state.isSelected}
        onClick={this.handleClick}
        renderLabel={this.renderLabel}
      />
    )
  }
}

export { TogglePlugin }
export default TogglePlugin