import { ContainerSlotContext } from '../../modules';
import React, { useImperativeHandle } from 'react';
import { useContext, useEffect, useState } from 'react';
import { View } from 'react-native';

/**
 * ContainerSlot props
 *
 * @category Props
 */

function createReset(collection, currentList, setChildren) {
  return () => {
    currentList.forEach(c => {
      const index = collection.findIndex(p => p === c);
      collection.splice(index, 1);
    });
    setChildren?.([...collection]);
  };
}

/**
  @category Component
 */
const MSlot = /*#__PURE__*/React.forwardRef((props, ref) => {
  let {
    style,
    children
  } = props;
  const {
    setLChildren,
    leftSlotChildren,
    setRChildren,
    rightSlotChildren,
    setBChildren,
    bottomSlotChildren
  } = useContext(ContainerSlotContext);
  children = Array.isArray(children) ? children : [children];
  const [cList, setClist] = useState(children);
  useImperativeHandle(ref, () => ({
    refresh: () => {
      console.log('refresh');
      setClist([...children]);
    }
  }));
  useEffect(() => {
    let reset;
    if (style === 'left') {
      reset = createReset(leftSlotChildren, cList, setLChildren);
      leftSlotChildren.push(...cList);
      setLChildren?.([...leftSlotChildren]);
    } else if (style === 'right') {
      reset = createReset(rightSlotChildren, cList, setRChildren);
      rightSlotChildren.push(...cList);
      setRChildren?.([...rightSlotChildren]);
    } else if (style === 'bottom') {
      reset = createReset(bottomSlotChildren, cList, setBChildren);
      bottomSlotChildren.push(...cList);
      setBChildren?.([...bottomSlotChildren]);
    }
    return () => {
      reset?.();
    };
  }, [cList]);
  return typeof style === 'string' ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement(View, {
    style: style
  }, cList);
});
export default MSlot;
//# sourceMappingURL=MSlot.js.map