import React from "react";
import TogglerCtx from "../Toggler.context";
import "./Content.scss";
import { Props } from "./Content.types";
import {
  addClassNameWithModifiers,
  parseBooleanModifierToString,
  addClassNames
} from "../../../helpers/components";

export const TogglerContent = (props: Props) => {
  const { children, style, className } = props;

  return (
    <TogglerCtx.Consumer>
      {({ isOpened }) => (
        <div
          className={addClassNames(
            className || "",
            addClassNameWithModifiers(
              "app-toggler-content",
              parseBooleanModifierToString(isOpened, "opened", "closed"),
              className || ""
            )
          )}
          style={style}
        >
          {children}
        </div>
      )}
    </TogglerCtx.Consumer>
  );
};

export default TogglerContent;