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

//strings
import {CHAT_CALL_BOX_COMPACTED} from "../constants/callModes";
import {THREAD_LEFT_ASIDE_SEARCH} from "../constants/actionTypes";

//actions
import {threadLeftAsideShowing} from "../actions/threadActions";

//components
import LeftAsideMainSearch from "./LeftAsideMainSearch";
import LeftAsideMainSeenList from "./LeftAsideMainSeenList";
import Scroller from "../../../Talk-ui-kit/src/scroller";

//styling
import style from "../../styles/app/LeftAsideMain.scss";

//statics

//functions

@connect(store => {
  return {
    smallVersion: store.chatSmallVersion,
    thread: store.thread.thread,
    leftAsideShowing: store.threadLeftAsideShowing,
    chatCallBoxShowing: store.chatCallBoxShowing
  }
})
export default class LeftAsideMain extends Component {

  constructor(props) {
    super(props);
  }

  componentDidUpdate(oldProps) {
    const {thread: oldThread} = oldProps;
    const {thread, dispatch} = this.props;
    this.scroller = React.createRef();
    if (oldThread.id !== thread.id) {
      return dispatch(threadLeftAsideShowing(false));
    }
  }

  render() {
    const {leftAsideShowing, smallVersion, chatCallBoxShowing} = this.props;
    const callBoxCompactedCondition = chatCallBoxShowing.showing === CHAT_CALL_BOX_COMPACTED;
    const {type, data, isShowing} = leftAsideShowing;
    const commonProps = {data, smallVersion};
    const classNames = classnames({
      [style.LeftAsideMain]: true,
      [style["LeftAsideMain--callBoxCompacted"]]: callBoxCompactedCondition,
      [style["LeftAsideMain--smallVersion"]]: smallVersion
    });
    return (
      <Scroller className={classNames} ref={this.scroller}>
        {
          leftAsideShowing ?
            type === THREAD_LEFT_ASIDE_SEARCH ?
              <LeftAsideMainSearch {...commonProps}/>
              :
              <LeftAsideMainSeenList {...commonProps}/>
            : ""
        }
      </Scroller>
    )
  }
}
