import React from 'react';
import {Component} from 'react';
import './AddRemoteMount.css';
import {connect} from 'react-redux';
import Button from '../../components/UI/Button/Button';
import Box from '../../components/UI/Box/Box';
import Text from '../../components/UI/Text/Text';
import {notifyError} from '../../redux/actions/error_actions';
import {addRemoteMount} from '../../redux/actions/mount_actions';
import {createModalConditionally} from '../../utils';

const mapStateToProps = state => {
  return {
    RemoteMounts: state.mounts.RemoteMounts,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    addRemoteMount: (hostNameOrIp, port, token) => dispatch(addRemoteMount(hostNameOrIp, port, token)),
    notifyError: (msg, critical, callback) => dispatch(notifyError(msg, critical, callback)),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(class extends Component {
  state = {
    Display: false,
    HostNameOrIp: '',
    Port: 20000,
    Token: '',
  };

  addRemoteMount = () => {
    if (this.state.HostNameOrIp.length === 0) {
      this.props.notifyError('Hostname or IP cannot be empty.');
    } else {
      const provider = 'Remote' + this.state.HostNameOrIp + ':' + this.state.Port;
      if (this.props.RemoteMounts.includes(provider)) {
        this.props.notifyError('Remote host already exists');
      } else {
        this.setState({
          Display: false
        }, () => {
          this.props.addRemoteMount(this.state.HostNameOrIp, this.state.Port, this.state.Token);
          this.setState({
            HostNameOrIp: '',
            Port: 20000,
            Token: '',
          });
        });
      }
    }
  };

  handleAddRemoteMount = () => {
    this.setState({
      Display: true,
    });
  };

  render() {
    const displayAdd = createModalConditionally(this.state.Display, (
      <Box dxDark
           dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
        <h1 style={{color: 'var(--text_color_error)', textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add Remote Mount</h1>
        <Text text={'Hostname or IP'}
              textAlign={'left'}
              type={'Heading2'}/>
        <input onChange={e => this.setState({HostNameOrIp: e.target.value.trim()})}
               className={'ConfigurationItemInput'}
               type={'text'}
               value={this.state.HostNameOrIp}/>
        <div style={{paddingTop: 'var(--default_spacing)'}}/>
        <Text text={'Port'}
              textAlign={'left'}
              type={'Heading2'}/>
        <input max={65535}
               min={1025}
               onChange={e => this.setState({Port: e.target.value})}
               className={'ConfigurationItemInput'}
               type={'number'}
               value={this.state.Port}/>
        <div style={{paddingTop: 'var(--default_spacing)'}}/>
        <Text text={'Remote Token'}
              textAlign={'left'}
              type={'Heading2'}/>
        <input onChange={e => this.setState({Token: e.target.value})}
               className={'ConfigurationItemInput'}
               type={'text'}
               value={this.state.Token}/>
        <div style={{paddingTop: 'var(--default_spacing)'}}/>
        <table cellSpacing={1}
               width="100%">
          <tbody>
          <tr>
            <td width="50%">
              <Button buttonStyles={{width: '100%'}}
                      clicked={() => this.addRemoteMount()}>OK</Button>
            </td>
            <td width="50%">
              <Button buttonStyles={{width: '100%'}}
                      clicked={() => this.setState({Display: false})}>Cancel</Button>
            </td>
          </tr>
          </tbody>
        </table>
      </Box>
    ));

    return (
      <div className={'AddRemoteMount'}>
        {displayAdd}
        <Button clicked={this.handleAddRemoteMount}>Add Remote Mount</Button>
      </div>
    );
  }
});