import React from 'react';
import './Toggle.scss';
import classNames from 'classnames';
import Icon from '../Icon';

export interface ToggleProps {
  /**
   * Optional onChange handler
   */
  onChange?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
  /**
   * Is this the principal call to action on the page?
   */
  type?: 'default' | 'withLabel' | 'withIcon' | 'controlled';
  /**
   * What background color to occur upon toggled
   */
  variant?: 'primary' | 'success' | 'danger';
  /**
   * Toggle contents if its type='with_label'
   */
  enableLabel?: string;
  disableLabel?: string;
  /**
   * Toggle contents if its type='with_icon'
   */
  enableIcon?: string;
  disableIcon?: string;
  /**
   * Optional disabled prop
   */
  disabled?: boolean;
  /**
   * Optional checked prop
   */
  checked?: boolean;

  id?: string;
  /**
   * Optional background transparent prop
   */
  isBackgroundTransparent?: boolean;
  /**
   * if you want label as adjacent
   */
  label?: string;
}

const Toggle: React.FC<ToggleProps> = ({
  onChange,
  type = 'default',
  variant = 'primary',
  enableLabel = 'Enable',
  disableLabel = 'Disable',
  enableIcon = '+',
  disableIcon = '-',
  disabled = false,
  checked = false,
  id,
  isBackgroundTransparent = false,
  label = '',
}) => {
  const handleChange = (e: any) => {
    if (onChange) {
      onChange(e);
    }
  };

  return (
    <div
      className={classNames('storybook-switch-container', {
        'storybook-switch-container--disabled': disabled,
      })}
    >
      <input
        className={classNames(
          `storybook-switch-checkbox storybook-switch-checkbox--${type} storybook-switch `
        )}
        id={`ff-toggle-${id}`}
        type="checkbox"
        disabled={disabled}
        onChange={handleChange}
        checked={checked}
      />
      <label
        className={classNames(
          `storybook-switch-label storybook-switch ${type} storybook-switch-label--${variant}`,
          {
            ['storybook-switch-label--isBackgroundTransparent']:
              isBackgroundTransparent,

            'storybook-switch-label--disabled': disabled,
          }
        )}
        htmlFor={`ff-toggle-${id}`}
      >
        {type === 'withLabel' && (
          <>
            {enableLabel || disableLabel ? (
              <p className="label-container">
                <p className="enable">{enableLabel}</p>
                <p className="disable">{disableLabel}</p>
              </p>
            ) : (
              ''
            )}
          </>
        )}
        {type === 'withIcon' && (
          <>
            {enableIcon || disableIcon ? (
              <p className="icon-container">
                <p className="enable">
                  {<Icon name={enableIcon} height={20} width={20} />}
                </p>
                <p className="disable">
                  {<Icon name={disableIcon} height={20} width={20} />}
                </p>
              </p>
            ) : (
              ''
            )}
          </>
        )}
        <span
          className={classNames(
            `storybook-switch-button`,
            `storybook-switch-button--${type} react-switch`
          )}
        />
      </label>
      {label === 'with adjacent label' && (
        <span
          className={`toggle-status-text ${checked ? 'toggle-status-text-enable' : 'toggle-status-text-disable'}`}
        >
          {checked ? enableLabel : disableLabel}
        </span>
      )}
    </div>
  );
};

export default Toggle;