import React, { useRef } from 'react';
import { connect } from 'react-redux';
import styled from "styled-components";
import Element from "./Element";
import { useHandler } from "../../hooks/useHandler";
import Droppable from "./Droppable";
var ChildContainer = /*#__PURE__*/React.memo( /*#__PURE__*/styled("div", {
  target: "e4na5wg0",
  label: "ChildContainer"
})({
  position: "relative",
  width: "100%"
}));
var LineContainer = /*#__PURE__*/React.memo(
/*#__PURE__*/
// @ts-ignore
styled("div", {
  target: "e4na5wg1",
  label: "LineContainer"
})(function (_ref) {
  var isOver = _ref.isOver;
  return {
    height: "3px",
    width: "100%",
    background: isOver ? "var(--mdc-theme-primary)" : "none"
  };
}));
var DropChild = /*#__PURE__*/React.memo(function (props) {
  var ref = useRef(null);
  var childId = props.childId,
      childType = props.childType,
      id = props.id,
      type = props.type,
      last = props.last,
      _props$directions = props.directions,
      directions = _props$directions === void 0 ? ['top', 'left', 'right'] : _props$directions;

  if (childType === 'row') {
    return /*#__PURE__*/React.createElement(Element, {
      key: childId,
      id: childId
    });
  }

  if (last) {
    directions.push("bottom");
  }

  var handleDrop = useHandler(props, function (_ref2) {
    var dropElement = _ref2.dropElement;
    return function (source, direction) {
      dropElement({
        source: source,
        target: {
          id: id,
          type: type,
          positionId: childId
        },
        direction: direction
      });
    };
  });
  return /*#__PURE__*/React.createElement(Droppable, {
    id: childId,
    dropRef: ref,
    type: type,
    last: last,
    directions: directions,
    onDrop: handleDrop
  }, function (_ref3) {
    var drop = _ref3.drop;
    return /*#__PURE__*/React.createElement(ChildContainer, {
      ref: drop(ref),
      key: childId
    }, /*#__PURE__*/React.createElement(Element, {
      key: childId,
      id: childId
    }));
  });
});

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    dropElement: function dropElement(payload) {
      dispatch({
        type: 'appBuilder/dropElement',
        payload: payload
      });
    }
  };
};

export default connect(null, mapDispatchToProps)( /*#__PURE__*/React.memo(DropChild, function (prev, next) {
  if (prev.childId === next.childId && prev.id === next.id && prev.type === next.type) {
    return true;
  }

  return false;
}));
//# sourceMappingURL=DropChild.js.map