function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import getCompliedClassName from '../../utils/getCompliedClassName';
import Group from '../group/Group';
import style from './Checkbox.module.css';
import getCompliedCustomId from '../../utils/getCompliedCustomId';
export default function CheckboxSkeleton(props) {
  let {
    disabled,
    isReadOnly,
    eleRef,
    text,
    indeterminate,
    customClassName = {},
    customId,
    onChange,
    value,
    name,
    size,
    color,
    id,
    customIdPrefix,
    customIdSuffix = '',
    tagAttributeProps,
    selectedValue,
    checkCondition,
    checked,
    variant,
    focusVisible,
    focusProps
  } = props;
  let isChecked = checkCondition && checkCondition(value, selectedValue);

  if (!checkCondition && props.hasOwnProperty('checked')) {
    isChecked = checked;
  }

  let checkContainment = getCompliedClassName(customClassName, {
    [style.base]: true,
    [style.disabled]: !!disabled,
    [style.focusVisible]: focusVisible && !customClassName.focusVisible
  }, {
    [customClassName.base]: !!customClassName.base,
    [customClassName.disabled]: !!customClassName.disabled,
    [customClassName.focusVisible]: focusVisible && !!customClassName.focusVisible
  });
  let checkClass = getCompliedClassName(customClassName, {
    [style.checkbox]: true,
    [style.indeterminate]: !!indeterminate,
    [style.checked]: !!isChecked,
    [style[size]]: !!size,
    [style[color]]: !!color,
    [style[variant]]: !!variant
  }, {
    [customClassName.checkbox]: customClassName.Checkbox,
    [customClassName.indeterminate]: customClassName.indeterminate,
    [customClassName.checked]: !!customClassName.checked,
    [customClassName.size]: !!customClassName.size,
    [customClassName.color]: !!customClassName.color,
    [customClassName.variant]: !!variant
  }),
      labelClass = getCompliedClassName(customClassName, {
    [style.label]: true
  }, {
    [customClassName.label]: !!customClassName.label
  });
  return /*#__PURE__*/React.createElement("span", _extends({
    className: checkContainment
  }, tagAttributeProps), /*#__PURE__*/React.createElement("span", {
    className: checkClass,
    onClick: !(disabled || isReadOnly) ? onChange && onChange.bind(null, value) : null
  }, /*#__PURE__*/React.createElement("input", _extends({
    type: "checkbox",
    className: style.input,
    id: id ? id : value,
    ref: eleRef,
    disabled: disabled,
    readOnly: isReadOnly,
    value: value,
    name: name,
    checked: isChecked,
    "data-id": getCompliedCustomId({
      customId,
      customIdPrefix,
      customIdSuffix
    }, customId.checkbox, [value]) //onChange={!disabled ?(e)=>{console.log(e.target.value); onChange(null,value)}: null}

  }, focusProps)), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 40 40",
    className: style.boxpath
  }, variant == 'outlined' && isChecked ? /*#__PURE__*/React.createElement("path", {
    xmlns: "http://www.w3.org/2000/svg",
    d: "M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44",
    className: style.tickbox
  }) : /*#__PURE__*/React.createElement("rect", {
    xmlns: "http://www.w3.org/2000/svg",
    x: "1",
    y: "1",
    width: "38",
    height: "38",
    rx: "4",
    className: style.tickbox
  }), indeterminate ? /*#__PURE__*/React.createElement("line", {
    xmlns: "http://www.w3.org/2000/svg",
    className: `${style.tickbox} ${style.linepath}`,
    x1: "11.47",
    y1: "20",
    x2: "28.53",
    y2: "20"
  }) : null), isChecked ? /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 44 44",
    className: style.tick
  }, /*#__PURE__*/React.createElement("polyline", {
    points: "12.56 19 19.61 26.06 40.39 5.28",
    className: style.tickpath
  })) : null)), /*#__PURE__*/React.createElement("label", {
    className: labelClass,
    htmlFor: id ? id : value
  }, text));
}
export function CheckboxGroup(props) {
  let {
    children,
    selectedValue,
    onChange,
    name,
    onChangeCallbackHandler,
    checkCondition,
    tagAttributeProps
  } = props;
  let renderChildren = React.Children.map(children, child => {
    return /*#__PURE__*/React.cloneElement(child, {
      selectedValue,
      name,
      checkCondition,
      onChange: onChangeCallbackHandler(onChange, child.props.onChange)
    });
  });
  return /*#__PURE__*/React.createElement(CheckboxGroupLayer, props, " ", renderChildren, " ");
}
export function CheckboxGroupContext(props) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, " ", props.children, " ");
}
export function CheckboxGroupLayer(props) {
  let {
    customClassName = {},
    children,
    direction,
    wrap,
    gap,
    customId,
    customIdPrefix,
    customIdSuffix,
    role,
    tagAttributeProps
  } = props;
  return /*#__PURE__*/React.createElement(Group, _extends({}, role, {
    direction: direction,
    customId: getCompliedCustomId({
      customId,
      customIdPrefix,
      customIdSuffix
    }, customId.checkboxgroup),
    customClassName: {
      base: customClassName
    },
    wrap: wrap,
    gap: gap
  }, tagAttributeProps), children);
}