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

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

export default connect(null, mapDispatchToProps)(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 '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>
  );
});
