/* eslint-disable no-unused-expressions */
/* eslint-disable react/forbid-prop-types */
/**
 * mSupply Mobile
 * Sustainable Solutions (NZ) Ltd. 2019
 */

import React from 'react';
import PropTypes from 'prop-types';
import { TextInput, StyleSheet } from 'react-native';

import currency from 'currency.js';

import { SimpleLabel } from './SimpleLabel';
import { FlexRow } from './FlexRow';
import { FlexView } from './FlexView';
import { SUSSOL_ORANGE, APP_FONT_FAMILY, APP_GENERAL_FONT_SIZE } from '../globalStyles/index';

/**
 * Renders a label and two text inputs, with a preceding $ and a decimal
 * separator. Uses two text inputs for handling dollars and cents.
 *
 * @prop {String} size            The font size - see SimpleLabel for details.
 * @prop {String} label           Left hand side text value.
 * @prop {Func} onChangeText      Change text handler.
 * @prop {Bool} isDisabled        Indicator whether this component is disabled.
 * @prop {String} underlineColor  Underline color of text inputs.
 * @prop {Object} textInputStyle  Style for the text input components.
 * @prop {Object} currencyAmount  currency object for the value of the inputs.
 */
export const CurrencyInputRow = ({
  size,
  label,
  onChangeText,
  isDisabled,
  underlineColorAndroid,
  textInputStyle,
  currencyAmount,
}) => {
  const dollarAmount = React.useRef(String(currencyAmount.dollars()));
  const centAmount = React.useRef(String(currencyAmount.cents()));

  const update = () => {
    const fullValue = `${dollarAmount.current}.${centAmount.current}`;
    onChangeText(currency(fullValue));
  };

  const onChange = key => x => {
    if (key === 'dollars') dollarAmount.current = x;
    if (key === 'cents') centAmount.current = x;
    update();
  };

  return (
    <FlexRow flex={1} alignItems="center">
      <FlexView flex={7}>
        <SimpleLabel text={label} size={size} />
      </FlexView>

      <FlexRow flex={3}>
        <SimpleLabel text="$" size="large" />
        <TextInput
          value={dollarAmount.current}
          underlineColorAndroid={underlineColorAndroid}
          style={textInputStyle}
          selectTextOnFocus
          onChangeText={onChange('dollars')}
          editable={!isDisabled}
        />
        <SimpleLabel text="." size="large" />
        <TextInput
          value={centAmount.current}
          underlineColorAndroid={underlineColorAndroid}
          style={textInputStyle}
          selectTextOnFocus
          onChangeText={onChange('cents')}
          editable={!isDisabled}
        />
      </FlexRow>
    </FlexRow>
  );
};

const localStyles = StyleSheet.create({
  textInputStyle: {
    flex: 3,
    textAlign: 'right',
    fontFamily: APP_FONT_FAMILY,
    fontSize: APP_GENERAL_FONT_SIZE,
  },
});

CurrencyInputRow.defaultProps = {
  isDisabled: false,
  label: 'Payment Amount',
  underlineColorAndroid: SUSSOL_ORANGE,
  size: 'large',
  textInputStyle: localStyles.textInputStyle,
};

CurrencyInputRow.propTypes = {
  onChangeText: PropTypes.func.isRequired,
  currencyAmount: PropTypes.object.isRequired,
  size: PropTypes.string,
  label: PropTypes.string,
  isDisabled: PropTypes.bool,
  underlineColorAndroid: PropTypes.string,
  textInputStyle: PropTypes.object,
};

@@ -1450,16 +1450,211 @@
 nts()));
+%0A  const refsArray = React.useRef(%5BReact.useRef(), React.useRef()%5D);%0A%0A  const onSubmit = nextIndex =%3E () =%3E %7B%0A    console.log('onsubmit');%0A    refsArray.current%5BnextIndex%5D?.current?.focus();%0A  %7D;
 %0A%0A  cons
@@ -2173,32 +2173,69 @@
      %3CTextInput%0A
+          ref=%7BrefsArray.current%5B0%5D%7D%0A
           value=
@@ -2444,32 +2444,72 @@
 e=%7B!isDisabled%7D%0A
+          onSubmitEditing=%7BonSubmit(1)%7D%0A
         /%3E%0A     
@@ -2560,32 +2560,69 @@
      %3CTextInput%0A
+          ref=%7BrefsArray.current%5B1%5D%7D%0A
           value=
@@ -2798,24 +2798,24 @@
 e('cents')%7D%0A
-
           ed
@@ -2827,32 +2827,72 @@
 e=%7B!isDisabled%7D%0A
+          onSubmitEditing=%7BonSubmit(0)%7D%0A
         /%3E%0A     

Add focusing logic