/*
 *
 * CallTask
 *
 */
import PropTypes from 'prop-types';
import React from 'react';
import { bindActionCreators } from "redux";
import { connect } from 'react-redux';
import {
  //CapSlideBox,
  //CapIcon,
  //CapHeader,
  CapLabel,
  CapIllustration,
} from '@capillarytech/cap-ui-library';
import { injectIntl, intlShape } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import { makeSelectMetaEntities, isLoadingMetaEntities, setInjectedTags } from '../Cap/selectors';
import * as globalActions from '../Cap/actions';
import * as actions from "./actions";
import makeSelectCallTask from './selectors';
import NewCallTask from '../../v2Components/NewCallTask';
import messages from './messages';
import './_callTask.scss';
import calltaskIllustration from '../Assets/images/calltaskIllustration.svg';
import injectSaga from '../../utils/injectSaga';
import injectReducer from '../../utils/injectReducer';
import { v2CallTaskSagas } from './sagas';
import v2CallTaskReducer from './reducer';
import { compose } from 'redux';

export class CallTask extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.state = {
      showCallTaskSlidebox: false,
      mode: props.mode || '', // supported modes are create | edit
    };
  }

  componentDidMount() {
    const query = {
      layout: 'SMS',
      type: 'TAG',
      context: 'outbound',
      embedded: 'embedded',
    };
    this.props.globalActions.fetchSchemaForEntity(query);
  }

  showNewCallTask = () => {
    this.setState({
      showCallTaskSlidebox: true,
      mode: 'create',
    });
  }

  closeSlideBox = () => {
    this.setState({
      showCallTaskSlidebox: false,
      mode: '',
    });
  }

  getIllustrationProps=() => {
    const { intl, showContentInSlidebox, onCreateNew, isFullMode } = this.props;
    const { formatMessage } = intl;
    const templateIntlText = formatMessage(messages.template);
    const templateText = isFullMode ? templateIntlText : '';
    return {
      buttonClassName: 'new-call-task-button',
      buttonLabel: formatMessage(messages.newCallTaskTemplate, { templateText }),
      onClick: showContentInSlidebox ? this.showNewCallTask : onCreateNew,
      illustrationImage: calltaskIllustration,
      title: formatMessage(messages.callTaskTitleIllustartion, { templateText }),
    };
  }
  render() {
    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities, selectedOfferDetails, messageDetails, injectedTags } = this.props;
    const { formatMessage } = intl;
    const { mode } = this.state;
    return (
      <div>
        {mode ?
          <NewCallTask
            metaEntities={metaEntities}
            isLoading={loadingMetaEntities}
            mode={mode}
            templateData={templateData}
            onCallTaskSubmit={onCallTaskSubmit}
            selectedOfferDetails={selectedOfferDetails}
            messageDetails={messageDetails}
            injectedTags={injectedTags || {}}
          />
          :
            <div>
              <CapLabel type="label1">
                {formatMessage(messages.callTaskInfo)}
              </CapLabel>
              <div className="call-task-action-button">
                <CapIllustration {...this.getIllustrationProps()} />
              </div>
              {/* {
              showCallTaskSlidebox && showContentInSlidebox &&
              <CapSlideBox
                header={
                  <CapHeader
                    title={formatMessage(messages.newMessage)}
                    prefix={
                      <CapIcon style={{ marginRight: '16px' }} type={"back"} onClick={this.closeSlideBox} />
                    } />
                }
                show={showCallTaskSlidebox}
                size="size-l"
                handleClose={this.closeSlideBox}
                content={
                  <NewCallTask
                    metaEntities={metaEntities}
                    isLoading={loadingMetaEntities}
                    mode={mode}
                    onCallTaskSubmit={onCallTaskSubmit}
                  />
                }
              />
            } */}
            </div>
        }
      </div>
    );
  }
}

CallTask.propTypes = {
  intl: intlShape.isRequired,
  onCallTaskSubmit: PropTypes.func,
  mode: PropTypes.string,
  templateData: PropTypes.object,
  globalActions: PropTypes.object,
  metaEntities: PropTypes.object,
  loadingMetaEntities: PropTypes.bool,
  showContentInSlidebox: PropTypes.bool,
  onCreateNew: PropTypes.func,
  isFullMode: PropTypes.bool,
  selectedOfferDetails: PropTypes.array,
  messageDetails: PropTypes.object,
};


const mapStateToProps = createStructuredSelector({
  CallTask: makeSelectCallTask(),
  metaEntities: makeSelectMetaEntities(),
  loadingMetaEntities: isLoadingMetaEntities(),
  injectedTags: setInjectedTags(),
});

function mapDispatchToProps(dispatch) {
  return {
    globalActions: bindActionCreators(globalActions, dispatch),
    actions: bindActionCreators(actions, dispatch),
  };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withSaga = injectSaga({ key: 'callTask', saga: v2CallTaskSagas });
const withReducer = injectReducer({ key: 'callTask', reducer: v2CallTaskReducer });

export default compose(withSaga, withReducer, withConnect)(injectIntl(CallTask));
