import React from "react";
import { connect } from "react-redux";

export const ContainerContent = props => (
  <div style={props.style}>{props.children}</div>
);

const Container = props => {
  const handleClick = () => {
    const {
      dispatch,
      settings,
      cKey,
      fieldValues,
      updateComponentSettings,
      getComponentSettings
    } = props;
    const { actions } = settings;

    if (actions) {
      const doTheseActions = actions.filter(itm => itm.behavior === "click");
      doTheseActions.forEach(action =>
        dispatch({
          ...action,
          settings: { ...settings, cKey, fieldValues },
          updateComponentSettings,
          getComponentSettings
        })
      );
    }
  };

  return (
    <div
      style={{
        ...props.settings.properties,
        justifyContent: "normal",
        display: "block",
        padding: "1px 0 0 0", // temporarily fixes this problem: https://ambid.slack.com/archives/G164PAK7D/p1560526689091500
        height: props.settings.properties.height || "inherit",
        width: props.settings.properties.width || "100%",
        marginTop: props.settings.properties.marginTop || -1 // temporarily fixes this problem: https://ambid.slack.com/archives/G164PAK7D/p1560526689091500
      }}
      onClick={handleClick}
    >
      <ContainerContent
        {...props}
        style={{ padding: props.settings.properties.padding }}
      />
    </div>
  );
};

export default connect()(Container);