import React, { useState } from 'react';
import style from './Switch.module.css';
import getCompliedClassName from '../../utils/getCompliedClassName';
import switchPropTypes, { defaultProps, propsDescription } from './Switch.propTypes';
import constantProps from './Switch.constantProps';
import getCompliedCustomId from '../../utils/getCompliedCustomId';

function getSwitchClassNames(props) {
  let {
    size,
    color,
    customClassName,
    label,
    shape,
    disabled,
    labelPlacement
  } = props;
  let classNameForSwitch = getCompliedClassName(customClassName, {
    [style.switch]: true,
    [style.labelplacementleft]: !!(label && labelPlacement === 'left'),
    [style.labelplacementtop]: !!(label && labelPlacement === 'top'),
    [style.labelplacementbottom]: !!(label && labelPlacement === 'bottom'),
    [style.disabled]: !!disabled
  }, {
    [customClassName.switch]: !!customClassName.switch,
    [customClassName.labelplacementleft]: !!(label && labelPlacement === 'left'),
    [customClassName.labelplacementtop]: !!(label && labelPlacement === 'top'),
    [customClassName.labelplacementbottom]: !!(label && labelPlacement === 'bottom'),
    [customClassName.disabled]: !!customClassName.disabled
  });
  let classNameForSlider = getCompliedClassName(customClassName, {
    [style[shape]]: !!shape,
    [style[size]]: true,
    [style.slider]: true,
    [style.disabled]: !!disabled,
    [style[color]]: !!color,
    [style.sliderlabelplacementtop]: !!(label && labelPlacement === 'top')
  }, {
    [customClassName[size]]: !!customClassName[size],
    [customClassName[color]]: !!customClassName[color],
    [customClassName.disabled]: !!customClassName.disabled,
    [customClassName.slider]: !!customClassName.slider,
    [customClassName.sliderlabelplacementtop]: !!(label && labelPlacement === 'top'),
    [customClassName[shape]]: !!customClassName[shape]
  });
  return {
    classNameForSwitch: classNameForSwitch,
    classNameForSlider: classNameForSlider
  };
}
/* dataObj - Object with keys "checked" and "handler". "checked" key is of boolean type. 
"handler" key is used to receive function to operate on the checked state. */


function constructHTMLForSwitch(props, dataObj) {
  let {
    customId,
    disabled,
    label
  } = props;
  let switchClassNameList = getSwitchClassNames(props);
  return /*#__PURE__*/React.createElement("label", {
    className: switchClassNameList.classNameForSwitch,
    tabIndex: disabled === true ? undefined : 0,
    "data-id": getCompliedCustomId(props, customId.switch)
  }, /*#__PURE__*/React.createElement("input", {
    role: "switch",
    tabIndex: "-1",
    type: "checkbox",
    disabled: disabled,
    checked: dataObj.checked,
    onChange: () => {
      changeHandler(dataObj.handler);
    }
  }), /*#__PURE__*/React.createElement("span", {
    className: switchClassNameList.classNameForSlider
  }), /*#__PURE__*/React.createElement("span", null, label));
}

function changeHandler(handlerMethod) {
  return handlerMethod();
}

export default function SwitchControlledByParent(props) {
  return constructHTMLForSwitch(props, {
    checked: props.checked,
    handler: () => {
      props.onToggle();
    }
  });
}
SwitchControlledByParent.propTypes = switchPropTypes;
SwitchControlledByParent.defaultProps = defaultProps;
SwitchControlledByParent.propsDescription = propsDescription;
SwitchControlledByParent.constantProps = constantProps;
export function SwitchWithLocalState(props) {
  let [switchChecked, setChecked] = useState(props.checked);
  return constructHTMLForSwitch(props, {
    checked: switchChecked,
    handler: () => {
      let toggledState = !switchChecked;
      setChecked(toggledState);
      props.onChange && props.onChange(toggledState);
    }
  });
}
SwitchWithLocalState.propTypes = switchPropTypes;
SwitchWithLocalState.defaultProps = defaultProps;
SwitchWithLocalState.propsDescription = propsDescription;
SwitchWithLocalState.constantProps = constantProps;