import React, { useEffect, useRef } from "react";
import SkeletonThemeWrapper from "../../customization-cornor/skeletonCustomization";
import Popup from "../popup/__popupfunctionality";
import useSelectAriaProps from "./controllers/useSelectAriaProps";
import { Option } from "./Select";
import style from "./Select.module.css";
import useSelect from "./useSelect";
/**
 * To handle the Option-onChange-Callback and OptionGroup-onChangeCallback in skeleton
 * @param {*} onChange
 * @param {*} itemOnChange
 * @returns
 */

export const onChangeCallbackHandler = (onChange, optionOnChange, callback, togglePopup) => {
  if (!optionOnChange) {
    return (value, itemId, ev) => {
      onChange && onChange(value, ev);
      togglePopup && togglePopup(ev);
      callback && callback(ev, itemId);
    };
  }

  return (value, itemId, ev) => {
    onChange && onChange(value, ev);
    togglePopup && togglePopup(ev);
    optionOnChange && optionOnChange(value, ev);
    callback && callback(ev, itemId);
  };
};

function handleScroll(e, handleGetNextOptions) {
  const ele = e.target;
  const {
    height: eleHeight
  } = ele.getBoundingClientRect();
  const elementHeight = eleHeight || ele.clientHeight;
  const eleScrollTop = ele.scrollTop;
  const eleScrollHeight = ele.scrollHeight;

  if (eleScrollHeight - (eleScrollTop + elementHeight) < 1) {
    handleGetNextOptions && handleGetNextOptions();
  }
}

function SelectBehaviour(props) {
  const {
    renderComponent,
    children,
    id,
    renderSelectedValue,
    onGetNextOptions,
    ...basicProps
  } = props;
  let isPopupOpen = props.isPopupOpen;
  const [selectedValue, onChange, activeValue] = useSelect(props, props.reducer);
  const {
    triggerProps,
    valueProps,
    menuProps,
    menuItemProps,
    rootElementProps
  } = useSelectAriaProps({
    uniqueId: id,
    ...props,
    isPopupOpen
  }, {
    selectedValue
  });
  const ItemId = useRef(null);
  const renderChildren = React.Children.map(children, (child, i) => {
    if (child.type === Option) {
      return /*#__PURE__*/React.cloneElement(child, {
        key: i,
        selectedValue,
        onChange: onChangeCallbackHandler(onChange, child.props.onChange, (e, itemId) => {
          ItemId.current = itemId;
        }, props.togglePopup),
        menuItemProps,
        className: style.option
      });
    }

    return /*#__PURE__*/React.cloneElement(child, {
      key: i,
      selectedValue,
      onChange: onChangeCallbackHandler(onChange, child.props.onChange, (e, itemId) => {
        ItemId.current = itemId;
      }, props.togglePopup)
    });
  });
  const renderProps = {
    selectedValue: !renderSelectedValue ? activeValue || selectedValue : renderSelectedValue(selectedValue),
    triggerProps: triggerProps(props),
    valueProps: valueProps(),
    menuProps: menuProps(),
    rootElementProps: rootElementProps(),
    accessProps: {
      menuItemProps,
      menuProps: menuProps(),
      rootElementProps: rootElementProps()
    },
    needAccess: false,
    children: renderChildren,
    onChange: onChangeCallbackHandler(onChange, props.onChange, (e, itemId) => {
      ItemId.current = itemId;
    }, props.togglePopup),
    onScroll: e => handleScroll(e, onGetNextOptions),
    isPopupOpen
  };
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}

export default Popup(SelectBehaviour);
export function OptionBehaviour(props) {
  const {
    value,
    selectedValue
  } = props;
  const isActive = selectedValue === value;
  const renderProps = {
    isActive
  };
  const {
    renderComponent,
    ...basicProps
  } = props;
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}