import React from 'react';
import cx from 'classnames';
import { Paragraph } from 'app/shared/components/text/text';

export interface Props {
  active: boolean;
  label?: string;
  disabled?: boolean;
  onToggle: (activeState: boolean) => void;
}

const ToggleButton = ({ active, disabled = false, label = '', onToggle }: Props) => {
  const handleToggle = () => {
    if (onToggle && !disabled) {
      onToggle(!active);
    }
  };

  const className = cx('c-toggle-button', { 'c-toggle-button--active': active });
  const classNameWrapper = cx('c-toggle-button__wrapper', { 'c-toggle-button__wrapper--active': active && !disabled });

  return <div className='o-layout o-layout--aligned u-cursor--pointer' onClick={handleToggle}>
    <div className={classNameWrapper}>
      <div className={className}/>
    </div>
    <div className="u-margin-left--small">
      <Paragraph size='small' extraClass='u-font--clear-spacings'>
        {label}
      </Paragraph>
    </div>
  </div>;
};

export default ToggleButton;