import React, {Component, Fragment} from "react";
import {connect} from "react-redux";
import classnames from "classnames";

//strings

//actions

//components
import Container from "../../../Talk-ui-kit/src/container";

//styling
import style from "../../styles/app/SupportModule.scss";
import SupportModuleBadge from "./SupportModuleBadge";

//statics

//functions


@connect(store => {
  return {
    chatSupportModuleBadgeShowing: store.chatSupportModuleBadgeShowing
  };
}, null, null, {forwardRef: true})
export default class SupportModule extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    const {children, chatSupportModuleBadgeShowing, supportMode} = this.props;
    if (!supportMode) {
      return children;
    }
    const classNames = classnames({
      [style.SupportModule]: true
    });
    return <Fragment>
      <Container>
        <SupportModuleBadge supportMode={supportMode}/>
      </Container>

      <Container className={classNames}
                 style={{
                   opacity: chatSupportModuleBadgeShowing ? 0 : 1,
                   transform: chatSupportModuleBadgeShowing ? "translateY(20px)" : "",
                   zIndex: chatSupportModuleBadgeShowing ? -99999999999 : 0
                 }}>
        {children && children}
      </Container>
    </Fragment>
  }

}
