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';
import Text from '../UI/Text/Text';
import Grid from '../UI/Grid/Grid';
import configureImage from '../../assets/images/configure.png';
import RootElem from '../../hoc/RootElem/RootElem';

export default CSSModules((props) => {
  let configButton = null;
  let secondRow = 6;
  if (props.allowConfig) {
    configButton = (
      <RootElem colSpan={4}
                rowSpan={6}>
        <img alt=''
             height={'16px'}
             onClick={props.disabled ? (e)=>{e.preventDefault();} : props.configClicked}
             src={configureImage}
             style={{padding: 0, border: 0, margin: 0, cursor: 'pointer'}}
             width={'16px'}/>
      </RootElem>
    );
  }

  let inputColumnSpan;
  let inputControl = null;
  if (props.platform === 'win32') {
    inputColumnSpan = 20;
    inputControl = <DropDown changed={props.changed}
                             colSpan={inputColumnSpan}
                             disabled={!props.allowMount || props.mounted || props.disabled}
                             items={props.items}
                             row={secondRow}
                             rowSpan={7}
                             selected={props.items.indexOf(props.location)}/>;

  } else {
    inputColumnSpan = 50;
    inputControl = (
      <RootElem colSpan={inputColumnSpan}
                row={secondRow}
                rowSpan={7}>
        <input disabled={!props.allowMount || props.mounted || props.disabled}
               onChange={props.changed}
               styleName={'Input'}
               type={'text'}
               value={props.location}/>
      </RootElem>);
  }

  const buttonDisplay = props.allowMount || props.disabled ?
    (props.mounted ? 'Unmount' : 'Mount') :
    <Loader color={'var(--heading_text_color)'}
            height='19px'
            type='Circles'
            width='19px'/>;

  const actionsDisplay = (
    <Button clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}
            col={inputColumnSpan + 2}
            colSpan={21}
            disabled={!props.allowMount || props.disabled}
            row={secondRow}
            rowSpan={7}>
      {buttonDisplay}
    </Button>);

  const autoMountControl = (
    <RootElem col={inputColumnSpan + 24}
              colSpan={28}
              row={secondRow}
              rowSpan={7}>
      <input checked={props.autoMount}
             disabled={props.disabled}
             onChange={props.autoMountChanged}
             type='checkbox'/>Auto-mount
    </RootElem>
  );

  const autoRestartControl = (
    <RootElem col={inputColumnSpan + 24 + 28}
              colSpan={24}
              row={secondRow}
              rowSpan={7}>
      <input checked={props.autoRestart}
             disabled={props.disabled}
             onChange={props.autoRestartChanged}
             type='checkbox'/>Restart
    </RootElem>
  );

  return (
    <Grid>
      {configButton}
      <Text
        col={configButton ? 6 : 0}
        rowSpan={5}
        text={props.title}
        type={'Heading1'}/>
      {inputControl}
      {actionsDisplay}
      {autoMountControl}
      {autoRestartControl}
    </Grid>
  );
}, styles, {allowMultiple: true});