import React, {Component} from "react";
import {connect} from "react-redux";
import {avatarUrlGenerator} from "../utils/helpers";
import {ContactList} from "./_component/contactList";

//strings

//actions
import {messageGetSeenList} from "../actions/messageActions";
import {threadCreateWithUser} from "../actions/threadActions";

//components
import Container from "../../../Talk-ui-kit/src/container";
import Gap from "../../../Talk-ui-kit/src/gap";
import {Text} from "../../../Talk-ui-kit/src/typography";
import strings from "../constants/localization";
import Loading, {LoadingBlinkDots} from "../../../Talk-ui-kit/src/loading";

//styling

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

  constructor(props) {
    super(props);
    this.onStartChat = this.onStartChat.bind(this);
    this.onScrollBottomThreshold = this.onScrollBottomThreshold.bind(this);
    this.state = {
      seenList: null
    }
  }

  componentDidUpdate(oldProps) {
    const {leftAsideShowing: oldLeftAsideShowing} = oldProps;
    const {leftAsideShowing} = this.props;
    const {data, isShowing} = leftAsideShowing;
    const {data: oldData} = oldLeftAsideShowing;
    if (isShowing) {
      if (data) {
        if (!oldData || oldData !== data) {
          this.getMessageSeenList(data);
        }
      }
    }
  }

  onStartChat(id) {
    this.props.dispatch(threadCreateWithUser(id, "TO_BE_USER_ID"));
  }

  getMessageSeenList(messageId) {
    const {dispatch, user} = this.props;
    this.setState({
      seenList: null,
      seeListLoading: true
    });
    dispatch(messageGetSeenList(messageId)).then(result => {
      this.setState({
        seenList: result ? result.filter(e=>e.id !== user.user.id) : [],
        seeListLoading: false
      })
    });
  }

  onScrollBottomThreshold() {

  }

  render() {
    const {seenList, seeListLoading} = this.state;
    if (seeListLoading) {
      return (
        <Container relative userSelect="none">
          <Container topCenter>
            <Loading hasSpace><LoadingBlinkDots size="sm"/></Loading>
          </Container>
        </Container>
      )
    }
    return (
      <Container relative>
        {
          seenList?.length ?
            <ContactList height={"calc(100vh - 89px)"}
                         contacts={seenList}
                         avatarSize={avatarUrlGenerator.SIZES.SMALL}
                         selection
                         invert/>
            :
            <Container relative>
              <Container topCenter>
                <Gap y={2}/>
                <Text>{strings.noBodyReadMessage}</Text>
              </Container>
            </Container>
        }
      </Container>
    )
  }
}
