import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './MountItem.css';
import DropDown from '../UI/DropDown/DropDown';
import Button from '../UI/Button/Button';
import Loader from 'react-loader-spinner';

export default CSSModules((props) => {
  let inputControl = null;
  let mountWidth = '70%';
  if (props.platform === 'win32') {
    inputControl = <DropDown disabled={!props.allowMount || props.mounted}
                             items={props.items}
                             selected={props.items.indexOf(props.location)}
                             changed={props.changed}/>;
    mountWidth = '18%';
  } else {
    inputControl = <input disabled={!props.allowMount || props.mounted}
                          type={'text'}
                          value={props.location}
                          onChange={props.changed}/>;
  }

  let actionDisplay = null;
  if (props.allowMount) {
    actionDisplay = <Button buttonStyles={{width: '100%'}}
                            clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}>{props.mounted ? 'Unmount' : 'Mount'}</Button>;
  } else {
    actionDisplay = <Loader color={'var(--heading_text_color)'}
                            height='24px'
                            width='24px'
                            type='Circles'/>;
  }
  return (
    <div styleName='MountItem'>
      <h2>{props.title}</h2>
      <table width='100%' cellPadding='2'>
        <tbody>
          <tr>
            <td width={mountWidth} height='30px'>{inputControl}</td>
            <td width='25%' align='center' valign='middle'>
              {actionDisplay}
            </td>
            <td>
              <input type='checkbox' checked={props.autoMount} onChange={props.autoMountChanged}/>Auto-mount
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}, styles, {allowMultiple: true});