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

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

//actions
import {chatModalPrompt} from "../actions/chatActions";

//components
import Modal, {ModalBody, ModalFooter} from "../../../Talk-ui-kit/src/modal";
import {Button} from "../../../Talk-ui-kit/src/button";
import {Text} from "../../../Talk-ui-kit/src/typography";
import Container from "../../../Talk-ui-kit/src/container";

//styling

//statics

//functions

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

  constructor(props) {
    super(props);
  }

  onClose() {
    const {dispatch, onCancel} = this.props;
    dispatch(chatModalPrompt());
    if (onCancel) {
      onCancel();
    }
  }

  render() {
    const {isShowing, smallVersion, message, extraMessage, onApply, confirmText, customBody, noConfirmButton, noCancelButton} = this.props.chatModalPrompt;
    return (
      <Modal isOpen={isShowing} onClose={this.onClose.bind(this)} inContainer={smallVersion} fullScreen={smallVersion}
             userSelect="none" wrapContent>

        <ModalBody>
          {!customBody &&
          <Container centerTextAlign>
            <Text bold
                  size="lg">
              {message}
            </Text>
          </Container>
          }
          {!customBody && extraMessage && extraMessage}
          {customBody && customBody}
        </ModalBody>
        {!customBody &&
        <ModalFooter>
          {!noConfirmButton &&
          <Button text onClick={onApply}>{confirmText || strings.remove}</Button>
          }
          {!noCancelButton &&
          <Button text onClick={this.onClose.bind(this)}>{strings.cancel}</Button>
          }
        </ModalFooter>
        }

      </Modal>
    )
  }
}
