import React from 'react';
import './ConfigurationItem.css';
import settings from '../../assets/settings';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
import {connect} from 'react-redux';
import {notifyInfo} from '../../redux/actions/error_actions';

const mapDispatchToProps = dispatch => {
  return {
    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";
    }
    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={void(0)}
                  className={'ConfigurationInfo'}
                  onClick={()=>{displayInfo(); return false;}}><FontAwesomeIcon icon={faInfoCircle}/></a>;
  }
  
  let data;
  switch (props.template.type) {
    case "bool":
      data = <input checked={JSON.parse(props.value)}
                    onChange={e=>handleChanged(e)}
                    type={'checkbox'}/>;
    break;

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

    case "list":
      const options = props.items.map((s, i) => {
        return (
          <option className={'ConfigurationItemOption'} key={i} value={s}>{s}</option>
        );
      });

      data = (
        <select onChange={e=>handleChanged(e)}
                className={'ConfigurationItemSelect'}
                value={props.value}>
          {options}
        </select>
      );
    break;

    case "string":
      data = <input onChange={e=>handleChanged(e)}
                    className={'ConfigurationItemInput'}
                    type={'text'}
                    value={props.value}/>;
    break;

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

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

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

    case "uint64":
      data = <input max={18446744073709551615}
                    min={0}
                    onChange={e=>handleChanged(e)}
                    className={'ConfigurationItemInput'}
                    type={'number'}
                    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%'>{infoDisplay} {props.label}</td> :
              <td width='100%'>{props.label}</td>}
            <td>{data}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
});