import "core-js/modules/es.array.includes";
import React from 'react';
import SkeletonThemeWrapper from '../../customization-cornor/skeletonCustomization';
import useCheckboxControl from './Checkbox.reducer';
import CheckboxContext from './CheckboxGroupContext';
import useFocusVisible from '@zohodesk/hooks/es/accessiblity/useFocusVisible';

const checkCondition = function () {
  let currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
  let selectedValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  return (selectedValue || []).includes(currentValue);
};

const onChangeCallbackHandler = (onChange, itemOnChange) => {
  if (!itemOnChange) {
    return onChange;
  }

  return (value, event) => {
    onChange && onChange(value, event);
    itemOnChange && itemOnChange(value, event);
  };
};

export function CheckboxGroupBehaviour(props) {
  //let { selectedValue: propSelectedValue, defaultValue: propDefaultValue, checkCondition: propCheckCondition } = deriveValuesFromChildren(props,checkCondition);
  const [selectedValue, onChange] = useCheckboxControl(props); //   {
  //   selectedValue: propSelectedValue,
  //   defaultValue: propDefaultValue,
  //   onChange: props.onChange
  // });

  let renderProps = {
    selectedValue,
    onChange,
    onChangeCallbackHandler,
    checkCondition
  };
  let {
    renderComponent,
    ...basicProps
  } = props;
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}
export function CheckboxContextBehaviour(props) {
  const [selectedValue, onChange] = useCheckboxControl(props);
  let renderProps = {
    selectedValue,
    onChange,
    onChangeCallbackHandler,
    checkCondition
  };
  let {
    renderComponent,
    ...basicProps
  } = props;
  return /*#__PURE__*/React.createElement(CheckboxContext.Provider, {
    value: {
      selectedValue: selectedValue ? selectedValue : props.defaultValue ? props.defaultValue : [],
      onChange,
      name: props.name
    }
  }, /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  }));
}
export default function CheckboxBehaviour(props) {
  let {
    selectedValue,
    onChange: onChangeWrapping,
    name,
    checkCondition: checkConditionProp
  } = props; // React.useContext(CheckboxContext) || {onChange:props.onChange?props.onChange:{}};

  let {
    focusVisible,
    focusProps
  } = useFocusVisible(props);
  let checkboxContext = React.useContext(CheckboxContext);

  if (checkboxContext) {
    selectedValue = checkboxContext.selectedValue;
    name = checkboxContext.name;
    onChangeWrapping = props.onChange ? (value, event) => {
      checkboxContext.onChange && checkboxContext.onChange(value, event);
      props.onChange && props.onChange(value, event);
    } : checkboxContext.onChange;
    checkConditionProp = checkCondition;
  }

  let renderProps = {
    selectedValue,
    name,
    onChange: onChangeWrapping,
    checkCondition: checkConditionProp,
    focusVisible,
    focusProps
  };
  let {
    renderComponent,
    ...basicProps
  } = props;
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}