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';
import {displayConfiguration, setProviderState} from '../../redux/actions/mount_actions';

const mapStateToProps = (state, ownProps) => {
  return {
    MState: state.mounts.MountState[ownProps.provider],
    Platform: state.common.Platform,
    PState: state.mounts.ProviderState[ownProps.provider]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    displayConfiguration: provider => dispatch(displayConfiguration(provider)),
    setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(props => {
  const handleAutoMountChanged = e => {
    const state = {
      ...props.PState,
      AutoMount: e.target.checked,
    };
    props.setProviderState(props.provider, state);
  };

  const handleAutoRestartChanged = e => {
    const state = {
      ...props.PState,
      AutoRestart: e.target.checked,
    };
    props.setProviderState(props.provider, state);
  };

  let configButton = null;
  let secondRow = 6;
  if (props.allowConfig) {
    const pointer = {cursor: props.MState.AllowMount ? 'pointer' : 'no-drop'};
    configButton = (
      <RootElem colSpan={4}
                rowSpan={6}>
        <img alt=''
             height={'16px'}
             onClick={props.MState.AllowMount ? ()=>props.displayConfiguration(props.provider) : 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.MState.AllowMount || props.MState.Mounted}
                              items={props.MState.DriveLetters}
                              row={secondRow}
                              rowSpan={7}
                              selected={props.MState.DriveLetters.indexOf(props.PState.MountLocation)}/>;

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

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

  const actionsDisplay = (
    <Button clicked={()=>props.clicked(props.provider, !props.MState.Mounted, props.PState.MountLocation)}
            col={inputColumnSpan + 2}
            colSpan={21}
            disabled={!props.MState.AllowMount}
            row={secondRow}
            rowSpan={7}>
      {buttonDisplay}
    </Button>);

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

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

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