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

//strings
import {
  ROUTE_ADD_CONTACT,
  ROUTE_CONTACTS,
} from "../constants/routes";
import strings from "../constants/localization";

//actions
import {contactAdding, contactListShowing} from "../actions/contactActions";

//components
import {Text} from "../../../Talk-ui-kit/src/typography";
import Gap from "../../../Talk-ui-kit/src/gap";
import {Button} from "../../../Talk-ui-kit/src/button";
import Container from "../../../Talk-ui-kit/src/container";
import {MdOutlineContactMail as MdOutlineChat} from "react-icons/md";

//styling
import style from "../../styles/utils/MainIntro.scss";

//statics

//functions

@connect()
export default class MainIntro extends Component {

  constructor(props) {
    super(props);
    this.onContactListShow = this.onContactListShow.bind(this);
    this.onAddMember = this.onAddMember.bind(this);
  }

  onContactListShow() {
    const {history, chatRouterLess, dispatch} = this.props;
    dispatch(contactListShowing(true));
    if (!chatRouterLess) {
      history.push(ROUTE_CONTACTS);
    }
  }

  onAddMember() {
    const {history, chatRouterLess, dispatch} = this.props;
    dispatch(contactAdding(true));
    if (!chatRouterLess) {
      history.push(ROUTE_ADD_CONTACT);
    }
  }

  render() {
    return (
      <Container center centerTextAlign className={style.MainIntro}>
        <Text size="lg" color="accent" bold>{strings.pleaseStartAThreadFirst}</Text>
        <MdOutlineChat size={40} style={{color: style.colorAccent}}/>
        <Container>
          <Button outlined onClick={this.onAddMember}>{strings.addContact}</Button>
          <Button outlined onClick={this.onContactListShow}>{strings.contactList}</Button>
        </Container>
      </Container>
    );
  }
}