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]
    }
  );

  let classNameForLabel = getCompliedClassName(
    customClassName,
    {


    },
    {

    }
  );

  return {
    classNameForSwitch:classNameForSwitch,
    classNameForSlider:classNameForSlider,
    classNameForLabel:classNameForLabel 
  }
}

export default function SwitchControlledByParent(props) {
  let {
    checked,
    onToggle,
    customId,
    disabled,
    label
  } = props;
  let switchClassNameList = getSwitchClassNames(props);
  return (
    <label
      className={switchClassNameList.classNameForSwitch} tabIndex={disabled === true ? undefined : 0} data-id={getCompliedCustomId(props, customId.switch)}>
      <input type="checkbox" disabled={disabled} checked={checked} onChange={() => {
        onToggle();
        
      }} />
      <span className={switchClassNameList.classNameForSlider}></span>
      <span className={switchClassNameList.classNameForLabel}>
        {label}
      </span>
    </label>
  );
}

SwitchControlledByParent.propTypes = switchPropTypes;
SwitchControlledByParent.defaultProps = defaultProps;
SwitchControlledByParent.propsDescription = propsDescription;
SwitchControlledByParent.constantProps = constantProps;



export function SwitchWithLocalState(props) {
  let {
    customId,
    onChange,
    disabled,
    label
  } = props;

 let [switchChecked,setChecked] = useState(props.checked);
 let switchClassNameList = getSwitchClassNames(props);
  return (
    <label
      className={switchClassNameList.classNameForSwitch} tabIndex={disabled === true ? undefined : 0} data-id={getCompliedCustomId(props, customId.switch)}>
      <input type="checkbox" disabled={disabled} checked={switchChecked} onChange={() => {
        setChecked(!switchChecked);
       onChange &&  onChange(!switchChecked);
      }} />
      <span className={switchClassNameList.classNameForSlider}></span>
      <span className={switchClassNameList.classNameForLabel}>
        {label}
      </span>
    </label>
  );
}

SwitchWithLocalState.propTypes = switchPropTypes;
SwitchWithLocalState.defaultProps = defaultProps;
SwitchWithLocalState.propsDescription = propsDescription;
SwitchWithLocalState.constantProps = constantProps;



