import React from 'react';
import './ConfigurationItem.css';
import CheckBox from '../../../components/UI/CheckBox/CheckBox';
import DropDown from '../../../components/UI/DropDown/DropDown';
import HostList from '../../HostList/HostList';
import Password from '../../../containers/UI/Password/Password';
import PropTypes from 'prop-types';
import settings from '../../../assets/settings';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { connect } from 'react-redux';
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
import { notifyError, notifyInfo } from '../../../redux/actions/error_actions';

const ConfigurationItem = (props) => {
  const handleChanged = (e) => {
    const target = e.target;
    if (target.type === 'checkbox') {
      target.value = e.target.checked ? 'true' : 'false';
    } else if (target.type === 'textarea') {
      e.target.string_array = String(e.target.value).replace(/\r\n/g, '\n').split('\n');
    }
    props.changed(target);
  };

  let infoDisplay;
  if (settings[props.grouping] && settings[props.grouping][props.label]) {
    const displayInfo = () => {
      const description = settings[props.grouping][props.label];
      props.notifyInfo(props.label, description);
    };

    infoDisplay = (
      <a
        href={'#'}
        className={'ConfigurationInfo'}
        onClick={() => {
          displayInfo();
          return false;
        }}>
        <FontAwesomeIcon icon={faInfoCircle} />
      </a>
    );
  }

  let data;
  switch (props.template.type) {
    case 'bool':
      data = (
        <CheckBox
          changed={handleChanged}
          checked={props.value}
          disabled={props.readOnly}
          autoFocus={props.autoFocus}
        />
      );
      break;

    case 'double':
      data = (
        <input
          min={0.0}
          autoFocus={props.autoFocus}
          disabled={props.readOnly}
          onChange={(e) => handleChanged(e)}
          step={'0.01'}
          className={'ConfigurationItemInput'}
          type={'number'}
          value={parseFloat(props.value).toFixed(2)}
        />
      );
      break;

    case 'host_list':
      data = (
        <HostList
          autoFocus={props.autoFocus}
          disabled={props.readOnly}
          onChange={(items) =>
            handleChanged({
              target: {
                type: 'host_list',
                value: items,
              },
            })
          }
          type={props.template.subtype}
          value={props.value}
        />
      );
      break;

    case 'list':
      data = (
        <DropDown
          alt
          auto
          autoFocus={props.autoFocus}
          changed={handleChanged}
          disabled={props.readOnly}
          items={props.items}
          selected={props.value}
        />
      );
      break;

    case 'string':
      if (props.template.subtype === 'password') {
        data = (
          <Password
            autoFocus={props.autoFocus}
            changed={(s) =>
              handleChanged({
                target: {
                  type: 'password',
                  value: s,
                },
              })
            }
            disabled={props.readOnly}
            mismatchHandler={() => props.notifyError('Passwords do not match')}
            value={props.value}
          />
        );
      } else {
        data = (
          <input
            onChange={(e) => handleChanged(e)}
            autoFocus={props.autoFocus}
            className={'ConfigurationItemInput'}
            disabled={props.readOnly}
            type={'text'}
            value={props.value}
          />
        );
      }
      break;

    case 'uint8':
      data = (
        <input
          max={255}
          min={0}
          autoFocus={props.autoFocus}
          disabled={props.readOnly}
          onChange={(e) => handleChanged(e)}
          className={'ConfigurationItemInput'}
          type={'number'}
          value={props.value}
        />
      );
      break;

    case 'uint16':
      data = (
        <input
          max={65535}
          min={0}
          autoFocus={props.autoFocus}
          disabled={props.readOnly}
          onChange={(e) => handleChanged(e)}
          className={'ConfigurationItemInput'}
          type={'number'}
          value={props.value}
        />
      );
      break;

    case 'uint32':
      data = (
        <input
          max={4294967295}
          min={0}
          autoFocus={props.autoFocus}
          disabled={props.readOnly}
          onChange={(e) => handleChanged(e)}
          className={'ConfigurationItemInput'}
          type={'number'}
          value={props.value}
        />
      );
      break;

    case 'uint64':
      data = (
        <input
          max={18446744073709551615}
          min={0}
          autoFocus={props.autoFocus}
          disabled={props.readOnly}
          onChange={(e) => handleChanged(e)}
          className={'ConfigurationItemInput'}
          type={'number'}
          value={props.value}
        />
      );
      break;

    case 'string_array':
      data = (
        <textarea
          autoFocus={props.autoFocus}
          disabled={props.readOnly}
          rows={4}
          cols={36}
          onChange={(e) => handleChanged(e)}
          className={'ConfigurationItemInput'}
          value={props.value.join('\n')}
        />
      );
      break;

    case 'password':
      data = (
        <Password
          autoFocus={props.autoFocus}
          changed={(s) =>
            handleChanged({
              target: {
                type: 'password',
                value: s,
              },
            })
          }
          disabled={props.readOnly}
          mismatchHandler={() => props.notifyError('Passwords do not match')}
          value={props.value}
        />
      );
      break;

    default:
      data = <div>{props.value}</div>;
  }

  return (
    <div className={'ConfigurationItem'}>
      <table cellPadding="2" width="100%">
        <tbody>
          <tr>
            {infoDisplay ? (
              <td width="100%" valign={'top'}>
                {infoDisplay} {props.label}
              </td>
            ) : (
              <td width="100%" valign={'top'}>
                {props.label}
              </td>
            )}
            <td>{data}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

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

ConfigurationItem.propTypes = {
  autoFocus: PropTypes.bool,
  changed: PropTypes.func.isRequired,
  grouping: PropTypes.string,
  items: PropTypes.array,
  label: PropTypes.string,
  notifyError: PropTypes.func.isRequired,
  notifyInfo: PropTypes.func.isRequired,
  readOnly: PropTypes.bool,
  template: PropTypes.object.isRequired,
  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number]),
};

export default connect(null, mapDispatchToProps)(ConfigurationItem);