// @flow
import React from 'react';
import cn from 'classnames';

import './scss/toggle.scss';
/** Props, передаваемые в Toggle
  * @property {string} leftLabel - текст, отображаемый слева от кнопки
  * @property {string} rightLabel - текст, отображаемый справа от кнопки
  * @property {boolean} rightPosition - позиция переключателя true - справа, false - слева
  * @property {boolean} disabled - активен ли элемент, если true, то функция
  * переключения будет заблокирована
  * @property {Function} onChange - коллбэк вызывающийся когда происходит переключение переключателя
  */
type ToggleProps = {
  leftLabel: string,
  rightLabel: string,
  rightPosition: boolean,
  disabled: boolean,
  onChange: Function,
};
/** State компонента Toggle
  * @property {boolean} rightPosition - позиция переключателя true - справа, false - слева
  * @property {boolean} disabled - активен ли элемент, если true, то функция
  * переключения будет заблокирована
  */
type ToggleState = {
  rightPosition: boolean,
  disabled: boolean,
};
/** Компонент Toggle - двухпозиционная кнопка
  * @example
  * <Toggle leftLabel='left' rightLabel='right' onChange={r => console.log(r)} />
  */
export default class Toggle extends React.Component<ToggleProps, ToggleState> {
     static defaultProps = {
       rightPosition: false,
       disabled: false,
       onChange: () => null,
     }

     constructor(props: ToggleProps) {
       super(props);
       this.state = {
         rightPosition: props.rightPosition,
         disabled: props.disabled,
       };
     }

  handleClick = (d?: string) => () => {
    if (this.state.disabled) {
      return;
    }
    const { onChange } = this.props;
    if (d === 'right') {
      this.setState({ rightPosition: true });
      onChange('right');
    } else if (d === 'left') {
      this.setState({ rightPosition: false });
      onChange('left');
    } else {
      const rightPosition = !this.state.rightPosition;
      this.setState({ rightPosition });
      const position = rightPosition ? 'right' : 'left';
      onChange(position);
    }
  }

  render() {
    const { rightPosition, disabled } = this.state;
    const { leftLabel, rightLabel } = this.props;
    const classToggle = cn({
      'omni-ui-general': true,
      'omni-toggle': true,
      'omni-toggle_right': rightPosition,
      'omni-toggle_disabled': disabled,
    });
    return (
      <div className={classToggle}>
        {leftLabel && <div className='omni-toggle__label'onClick={this.handleClick('left')} >{leftLabel}</div>}
          <div
            className='omni-toggle__toggle'
            onClick={this.handleClick()}
          >
            <div className='omni-toggle__area'>
              <div className='omni-toggle__button'/>
            </div>
          </div>
        {rightLabel && <div className='omni-toggle__label' onClick={this.handleClick('right')}>{rightLabel}</div>}
      </div>
    );
  }
}