import React from 'react';
import './MountItem.css';
import {connect} from "react-redux";
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';

const mapStateToProps = state => {
  return {
    Platform: state.common.Platform,
  };
};

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

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

  } else {
    inputColumnSpan = 58;
    inputControls = [];
    let key = 0;
    inputControls.push((
      <RootElem colSpan={inputColumnSpan - 8}
                key={'i' + key++}
                row={secondRow}
                rowSpan={7}>
        <input disabled={!props.allowMount || props.mounted}
               maxLength={4096}
               onChange={props.changed}
               size={4096}
               className={'MountItemInput'}
               type={'text'}
               value={props.location}/>
      </RootElem>
    ));
    inputControls.push((
      <Button clicked={()=>props.browseClicked(props.title, props.location)}
              col={inputColumnSpan - 7}
              colSpan={7}
              disabled={props.mounted || !props.allowMount}
              key={'b' + key++}
              row={secondRow}
              rowSpan={7}>...</Button>
    ));
  }

  const buttonDisplay = props.allowMount ?
    (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)}
            col={inputColumnSpan + 2}
            colSpan={21}
            disabled={!props.allowMount}
            row={secondRow}
            rowSpan={7}>
      {buttonDisplay}
    </Button>);

  const autoMountControl = (
    <RootElem col={inputColumnSpan + 24}
              colSpan={28}
              row={secondRow}
              rowSpan={7}>
      <input checked={props.autoMount}
             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}
             onChange={props.autoRestartChanged}
             type='checkbox'/>Restart
    </RootElem>
  );

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