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

//strings
import strings from "../constants/localization";

//actions
import {chatSupportModuleBadgeShowing} from "../actions/chatActions";
import {threadCreateWithExistThread} from "../actions/threadActions";

//components
import Container from "../../../Talk-ui-kit/src/container";
import {ButtonFloating} from "../../../Talk-ui-kit/src/button";
import Loading, {LoadingBlinkDots} from "../../../Talk-ui-kit/src/loading";
import Image from "../../../Talk-ui-kit/src/image";
import {Text} from "../../../Talk-ui-kit/src/typography";

//styling
import style from "../../styles/app/SupportModuleBadge.scss";
import talkLogo from "../../styles/images/SupportModuleBadge/talk-logo.png";

//statics

//functions


@connect(store => {
  return {
    chatInstance: store.chatInstance.chatSDK,
    badgeShowing: store.chatSupportModuleBadgeShowing,
    supportMode: store.chatSupportMode
  };
}, null, null, {forwardRef: true})
export default class SupportModuleBadge extends Component {

  constructor(props) {
    super(props);
    this.onShowChatClick = this.onShowChatClick.bind(this);
    this.state = {
      showLoading: true,
      error: false
    }
    this.readyPassed = false;
  }

  componentDidUpdate(oldProps) {
    const {
      chatInstance,
      supportMode,
      badgeShowing
    } = this.props;
    const {threadId, onClose, onOpen, onReady} = supportMode;
    if (oldProps.badgeShowing !== badgeShowing) {
      if (badgeShowing) {
        onClose && onClose();
      } else {
        onOpen && onOpen();
      }
    }
    if (oldProps.chatInstance !== chatInstance) {
      !this.readyPassed && onReady && onReady({
        changeThread: this.changeThread.bind(this),
        open: this.onShowChatClick.bind(this),
        close: this.onShowChatClick.bind(this, true),
        setToken: this.setToken.bind(this)
      })
      this.changeThread(threadId);
    }
  }

  setToken(token) {
    const {chatInstance} = this.props;
    if (chatInstance) {
      chatInstance.setToken(token);
      return true;
    }
    const {onError} = this.props.supportMode;
    onError && onError("your token is not set because chat SDK is not ready yet try later")
  }

  onShowChatClick(forceClose) {
    this.props.dispatch(chatSupportModuleBadgeShowing(!!forceClose));
  }

  changeThread(threadId) {
    const {
      chatInstance,
      supportMode,
      dispatch
    } = this.props;
    const {onLoading, onError} = supportMode;
    onLoading && onLoading(true);
    chatInstance.getThreadInfo({threadIds: [threadId]}).then(thread => {
      onLoading && onLoading(false);
      if (!thread) {
        onError && onError(strings.thereIsNoSuchThreadFound(threadId));
        return this.setState({
          showLoading: false,
          error: strings.thereIsNoSuchThreadFound(threadId)
        })
      }
      dispatch(threadCreateWithExistThread(thread));
      this.setState({
        showLoading: false
      });
      const {badgeShowing, supportMode} = this.props;
      const {autoShowing} = supportMode;
      if (autoShowing) {
        if (badgeShowing) {
          dispatch(chatSupportModuleBadgeShowing(false));
        }
      }
    });
  }

  render() {
    const {supportMode, badgeShowing} = this.props;
    const {showLoading, error} = this.state;
    const {hideBadge} = supportMode;
    if (!badgeShowing || hideBadge) {
      return null;
    }
    const classNames = classnames({
      [style.SupportModuleBadge]: true
    });
    return (
      <ButtonFloating className={classNames} onClick={showLoading || error ? null : this.onShowChatClick}
                      position={{right: 0, bottom: 0}}>
        {showLoading &&
        <Container className={style.SupportModuleBadge__LoadingContainer}>
          <Container center style={{marginTop: "-6px"}}>
            <Loading><LoadingBlinkDots size="sm" invert/></Loading>
          </Container>
        </Container>
        }
        <Image
          className={style.SupportModuleBadge__Image}
          setOnBackground
          src={talkLogo}/>

        {error &&
        <Container className={style.SupportModuleBadge__ErrorContainer}>
          <Text invert>{error}</Text>
        </Container>
        }
      </ButtonFloating>
    );
  }
}
