import React from 'react';
import {Component} from 'react';
import './AddMount.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, addS3Mount} from '../../redux/actions/mount_actions';
import {createModalConditionally} from '../../utils';
import DropDown from '../../components/UI/DropDown/DropDown';
import * as Constants from '../../constants';

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

const mapDispatchToProps = dispatch => {
  return {
    addRemoteMount: (hostNameOrIp, port, token) => dispatch(addRemoteMount(hostNameOrIp, port, token)),
    addS3Mount: (name, accessKey, secretKey, region, bucketName, url) => dispatch(addS3Mount(name, accessKey, secretKey, region, bucketName, url)),
    notifyError: (msg, critical, callback) => dispatch(notifyError(msg, critical, callback)),
  }
};

const default_state = {
  AccessKey: '',
  BucketName: '',
  DisplayRemote: false,
  DisplayS3: false,
  HostNameOrIp: '',
  Name: '',
  Port: 20000,
  Provider: Constants.S3_PROVIDER_LIST[0],
  Region: 'any',
  SecretKey: '',
  Token: '',
};

export default connect(mapStateToProps, mapDispatchToProps)(class extends Component {
  state = {
    ...default_state,
  };

  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({
          DisplayRemote: false
        }, () => {
          this.props.addRemoteMount(this.state.HostNameOrIp, this.state.Port, this.state.Token);
          this.setState({
            ...default_state,
          });
        });
      }
    }
  };

  addS3Mount = () => {
    if (this.state.Name.length === 0) {
      this.props.notifyError('Name cannot be empty.');
    } else if (this.state.AccessKey.length === 0) {
      this.props.notifyError('AccessKey cannot be empty.');
    } else if (this.state.SecretKey.length === 0) {
      this.props.notifyError('SecretKey cannot be empty.')
    } else {
      const provider = 'S3' + this.state.Name;
      if (this.props.S3Mounts.includes(provider)) {
        this.props.notifyError('Remote host already exists');
      } else {
        this.setState({
          DisplayS3: false
        }, () => {
          this.props.addS3Mount(this.state.Name, this.state.AccessKey, this.state.SecretKey,
            this.state.Region, this.state.BucketName, Constants.S3_PROVIDER_URL[this.state.Provider]);
          this.setState({
            ...default_state,
          });
        });
      }
    }
  };

  handleAddS3Mount = () => {
    this.setState({
      DisplayRemote: false,
      DisplayS3: true,
    });
  };

  handleAddRemoteMount = () => {
    this.setState({
      DisplayRemote: true,
      DisplayS3: false,
    });
  };

  render() {
    const displayAddRemote = createModalConditionally(this.state.DisplayRemote, (
      <Box dxDark
           dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
        <h1 style={{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)'}}/>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <Button buttonStyles={{width: '100%'}}
                  clicked={() => this.addRemoteMount()}>OK</Button>
          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
          <Button buttonStyles={{width: '100%'}}
                  clicked={() => this.setState({DisplayRemote: false})}>Cancel</Button>
        </div>
      </Box>
    ));

    const displayAddS3 = createModalConditionally(this.state.DisplayS3, (
      <Box dxDark
           dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
        <h1 style={{textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add S3
          Mount</h1>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <Text text={'Name'}
                textAlign={'left'}
                type={'Heading2'}/>
          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
          <Text text={'Provider'}
                textAlign={'left'}
                type={'Heading2'}/>
        </div>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <input onChange={e => this.setState({Name: e.target.value.trim()})}
                 className={'ConfigurationItemInput'}
                 style={{width: '100%'}}
                 type={'text'}
                 value={this.state.Name}/>
          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
          <DropDown changed={e => this.setState({Provider: e.target.value})}
                    items={Constants.S3_PROVIDER_LIST}
                    selected={this.state.Provider}/>
        </div>
        <div style={{paddingTop: 'var(--default_spacing)'}}/>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <Text text={'Bucket Name (optional)'}
                textAlign={'left'}
                type={'Heading2'}/>
          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
          <Text text={'Region'}
                textAlign={'left'}
                type={'Heading2'}/>
        </div>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <input onChange={e => this.setState({BucketName: e.target.value})}
                 className={'ConfigurationItemInput'}
                 style={{width: '100%'}}
                 type={'text'}
                 value={this.state.BucketName}/>
          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
          <input onChange={e => this.setState({Region: e.target.value})}
                 className={'ConfigurationItemInput'}
                 type={'text'}
                 value={this.state.Region}/>
        </div>
        <div style={{paddingTop: 'var(--default_spacing)'}}/>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <Text text={'Access Key'}
                textAlign={'left'}
                type={'Heading2'}/>
          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
          <Text text={'Secret Key'}
                textAlign={'left'}
                type={'Heading2'}/>
        </div>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <input onChange={e => this.setState({AccessKey: e.target.value})}
                 className={'ConfigurationItemInput'}
                 type={'text'}
                 value={this.state.AccessKey}/>
          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
          <input onChange={e => this.setState({SecretKey: e.target.value})}
                 className={'ConfigurationItemInput'}
                 type={'text'}
                 value={this.state.SecretKey}/>
        </div>
        <div style={{paddingTop: 'calc(var(--default_spacing) * 2)'}}/>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <div style={{width: '200%'}}/>
          <Button buttonStyles={{width: '100%'}}
                  clicked={() => this.addS3Mount()}>OK</Button>
          <div style={{paddingLeft: 'var(--default_spacing)'}}/>
          <Button buttonStyles={{width: '100%'}}
                  clicked={() => this.setState({DisplayS3: false})}>Cancel</Button>
        </div>
      </Box>
    ));

    return (
      <div className={'AddMount'}>
        {displayAddRemote}
        {displayAddS3}
        <div className={'AddMountButtons'}>
          {this.props.remoteSupported ?
            <Button className={'AddMountButton'}
                    clicked={this.handleAddRemoteMount}>Add Remote Mount</Button> : null}
          {this.props.remoteSupported && this.props.s3Supported ?
            <div style={{paddingRight: 'var(--default_spacing)'}}/> : null}
          {this.props.s3Supported ?
            <Button className={'AddMountButton'}
                    clicked={this.handleAddS3Mount}>Add S3 Mount</Button> : null}
        </div>
      </div>
    );
  }
});