text: // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
  // See LICENSE.txt for license information.
  
  import React, {PureComponent} from 'react';
  import PropTypes from 'prop-types';
  import {intlShape} from 'react-intl';
  import {
      Keyboard,
      InteractionManager,
  } from 'react-native';
  import {Navigation} from 'react-native-navigation';
  
  import {General, RequestStatus} from 'mattermost-redux/constants';
  import EventEmitter from 'mattermost-redux/utils/event_emitter';
  
  import EditChannelInfo from 'app/components/edit_channel_info';
  import {setNavigatorStyles} from 'app/utils/theme';
  import {popTopScreen, dismissModal, setButtons} from 'app/actions/navigation';
  
  export default class CreateChannel extends PureComponent {
      static propTypes = {
          componentId: PropTypes.string,
          theme: PropTypes.object.isRequired,
          deviceWidth: PropTypes.number.isRequired,
          deviceHeight: PropTypes.number.isRequired,
          createChannelRequest: PropTypes.object.isRequired,
          channelType: PropTypes.string,
          closeButton: PropTypes.object,
          actions: PropTypes.shape({
              handleCreateChannel: PropTypes.func.isRequired,
          }),
      };
  
      static contextTypes = {
          intl: intlShape,
      };
  
      static defaultProps = {
          channelType: General.OPEN_CHANNEL,
      };
  
      leftButton = {
          id: 'close-new-channel',
      };
  
      rightButton = {
          id: 'create-channel',
          enabled: false,
          showAsAction: 'always',
      };
  
      constructor(props, context) {
          super(props);
  
          this.state = {
              error: null,
              creating: false,
              displayName: '',
              purpose: '',
              header: '',
          };
  
          this.rightButton.text = context.intl.formatMessage({id: 'mobile.create_channel', defaultMessage: 'Create'});
          this.rightButton.color = props.theme.sidebarHeaderTextColor;
  
          if (props.closeButton) {
              this.left = {...this.leftButton, icon: props.closeButton};
          }
      }
  
      componentDidMount() {
          this.navigationEventListener = Navigation.events().bindComponent(this);
          this.emitCanCreateChannel(false);
      }
  
      componentWillReceiveProps(nextProps) {
          if (this.props.theme !== nextProps.theme) {
              setNavigatorStyles(this.props.componentId, nextProps.theme);
          }
  
          const {createChannelRequest} = nextProps;
  
          if (this.props.createChannelRequest !== createChannelRequest) {
              switch (createChannelRequest.status) {
              case RequestStatus.STARTED:
                  this.emitCreating(true);
                  this.setState({error: null, creating: true});
                  break;
              case RequestStatus.SUCCESS:
                  EventEmitter.emit('close_channel_drawer');
                  InteractionManager.runAfterInteractions(() => {
                      this.emitCreating(false);
                      this.setState({error: null, creating: false});
                      this.close(false);
                  });
                  break;
              case RequestStatus.FAILURE:
                  this.emitCreating(false);
                  this.setState({error: createChannelRequest.error, creating: false});
                  break;
              }
          }
      }
  
      navigationButtonPressed({buttonId}) {
          switch (buttonId) {
          case 'close-new-channel':
              this.close(!this.props.closeButton);
              break;
          case 'create-channel':
              this.onCreateChannel();
              break;
          }
      }
  
      close = (goBack = false) => {
          if (goBack) {
              popTopScreen();
          } else {
              dismissModal();
          }
      };
  
      emitCanCreateChannel = (enabled) => {
          const {componentId} = this.props;
          const buttons = {
              rightButtons: [{...this.rightButton, enabled}],
          };
  
          if (this.left) {
              buttons.leftButtons = [this.left];
          }
  
          setButtons(componentId, buttons);
      };
  
      emitCreating = (loading) => {
          const {componentId} = this.props;
          const buttons = {
              rightButtons: [{...this.rightButton, enabled: !loading}],
          };
  
          if (this.left) {
              buttons.leftButtons = [this.left];
          }
  
          setButtons(componentId, buttons);
      };
  
      onCreateChannel = () => {
          Keyboard.dismiss();
          const {displayName, purpose, header} = this.state;
          this.props.actions.handleCreateChannel(displayName, purpose, header, this.props.channelType);
      };
  
      onDisplayNameChange = (displayName) => {
          this.setState({displayName});
      };
  
      onPurposeChange = (purpose) => {
          this.setState({purpose});
      };
  
      onHeaderChange = (header) => {
          this.setState({header});
      };
  
      render() {
          const {
              theme,
              deviceWidth,
              deviceHeight,
          } = this.props;
          const {
              error,
              creating,
              displayName,
              purpose,
              header,
          } = this.state;
  
          return (
              <EditChannelInfo
                  theme={theme}
                  enableRightButton={this.emitCanCreateChannel}
                  error={error}
                  saving={creating}
                  onDisplayNameChange={this.onDisplayNameChange}
                  onPurposeChange={this.onPurposeChange}
                  onHeaderChange={this.onHeaderChange}
                  displayName={displayName}
                  purpose={purpose}
                  header={header}
                  deviceWidth={deviceWidth}
                  deviceHeight={deviceHeight}
              />
          );
      }
  }
  
  