import React from 'react';
import './InfoDetails.css';
import Box from '../UI/Box/Box';
import Button from '../UI/Button/Button';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { dismissInfo, notifyError } from '../../redux/actions/error_actions';
import { promptLocationAndSaveFile } from '../../utils';

const InfoDetails = (props) => {
  let msg = props.InfoMessage.message;
  const classes = ['InfoDetailsContent'];

  let changed = true;
  let copyable = false;
  while (changed) {
    changed = false;
    if (msg.startsWith('!alternate!')) {
      classes.push('Alternate');
      msg = msg.substr('!alternate!'.length);
      changed = true;
    }
    if (msg.startsWith('!copyable!')) {
      classes.push('Copyable');
      msg = msg.substr('!copyable!'.length);
      copyable = changed = true;
    }
  }

  const scrollToTop = (textArea) => {
    if (!textArea.firstClick) {
      textArea.firstClick = true;
      textArea.scrollTop = 0;
      textArea.setSelectionRange(0, 0);
    }
  };

  return (
    <Box dxDark dxStyle={{ padding: 'var(--default_spacing)' }}>
      <h1 className={'InfoDetailsHeading'}>{props.InfoMessage.title}</h1>
      <div className={classes.join(' ')}>
        {copyable ? (
          <textarea
            autoFocus
            rows={9}
            onChange={() => {}}
            value={msg}
            className={'SkynetImportTextArea'}
            onClick={(e) => scrollToTop(e.target)}
          />
        ) : (
          <p style={{ textAlign: 'left' }}>{msg}</p>
        )}
      </div>
      {props.InfoMessage.saveToFile ? (
        <div className={'InfoButtonOwner'}>
          <Button clicked={props.dismissInfo}>Dismiss</Button>
          <Button
            buttonStyles={{ marginLeft: 'var(--default_spacing)' }}
            clicked={() => {
              if (
                promptLocationAndSaveFile(
                  props.InfoMessage.fileName + '.' + props.InfoMessage.extension,
                  msg,
                  props.notifyError
                )
              ) {
                props.dismissInfo();
              }
            }}>
            Save...
          </Button>
        </div>
      ) : (
        <Button clicked={props.dismissInfo}>Dismiss</Button>
      )}
    </Box>
  );
};

const mapStateToProps = (state) => {
  return {
    InfoMessage: state.error.InfoStack.length > 0 ? state.error.InfoStack[0] : '',
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    notifyError: (msg) => dispatch(notifyError(msg)),
    dismissInfo: () => dispatch(dismissInfo()),
  };
};

InfoDetails.propTypes = {
  InfoMessage: PropTypes.object.isRequired,
  dismissInfo: PropTypes.func.isRequired,
  notifyError: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispatchToProps)(InfoDetails);