import React, { useState, createRef } from 'react';
import { StyleSheet, Text, View, ViewStyle } from 'react-native';
import { responsiveFontSize, responsiveWidth } from 'react-native-responsive-dimensions';
import Modal from 'react-native-modal';
import { Button } from 'react-native-paper';
import _isEmpty from 'lodash/isEmpty';
import _omit from 'lodash/omit';

import { Dictionary, ErrorField } from '../../types';
import { ConnectorCredential } from 'pluggy-js/dist/types';
import ConnnectCredential from './ConnectCredential';
import { colors } from '../../theme/colors';

type ConnectFormProps = {
  credentials: ConnectorCredential[];
  onSubmit: Function;
  color: string;
  inputErrors: ErrorField[] | undefined;
  showModal: boolean;
  onModalOk: () => void;
  modalMessage: String;
  onClean: Function;
  isLoading: boolean;
};

type InputRef = {
  focus: Function;
  blur: Function;
};

const ConnectForm = (props: ConnectFormProps) => {
  const {
    credentials,
    onSubmit,
    onClean,
    inputErrors,
    showModal,
    onModalOk,
    modalMessage,
    isLoading,
    color,
  } = props;
  const refs = credentials?.map(_ => createRef<InputRef>());
  const [form, setForm] = useState<Dictionary<string>>({});
  const [formErrors, setFormErrors] = useState<Dictionary<string>>();

  const handleUpdate = (name: string, text: string) => {
    setForm(prevForm => ({ ...prevForm, [name]: text }));
    if (formErrors) {
      setFormErrors(prevFormErrors => _omit(prevFormErrors, name));
    }
    if (inputErrors) {
      onClean(name);
    }
  };

  const handleSubmitEditing = (index: number) => {
    return () => {
      const nextRef = refs[index + 1];
      if (nextRef) {
        nextRef.current!.focus();
      } else {
        refs[index].current!.blur();
      }
    };
  };

  const handleSubmit = () => {
    const validations = credentials.reduce((dict: Dictionary<string>, credential) => {
      //@ts-ignore
      const { name, validation, validationMessage } = credential;
      const value = form[name];
      if (!RegExp(validation).test(value)) {
        dict[name] = validationMessage;
      }
      return dict;
    }, {});

    if (_isEmpty(validations)) {
      onSubmit(form);
    } else {
      setFormErrors(validations);
    }
  };

  const getErrorMessage = (name: string) => {
    // onSubmit validations (FE)
    if (formErrors) {
      return formErrors[name];
    }
    // response validations (BE)
    if (inputErrors) {
      return inputErrors.find(e => e.parameter === name)?.message;
    }
  };

  const containerStyles: ViewStyle = {
    flex: 1,
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: color,
  };

  return (
    <View style={containerStyles}>
      {credentials.map(({ label, name, type }, index) => {
        const isLast = index === credentials.length - 1;
        const submitBtn = isLast ? 'done' : 'next';
        const error = getErrorMessage(name);
        return (
          <ConnnectCredential
            ref={refs[index]}
            key={name}
            label={label}
            name={name}
            type={type}
            blurOnSubmit={false}
            returnKeyType={submitBtn}
            onChangeField={handleUpdate}
            onSubmitEditing={handleSubmitEditing(index)}
            // color={color}
            error={error}
          />
        );
      })}
      <Button
        mode="contained"
        loading={isLoading}
        color={colors.pinkMain}
        style={styles.btn}
        labelStyle={styles.btnLabel}
        uppercase={false}
        children={'Continue'}
        onPress={handleSubmit}
      />
      <Modal isVisible={showModal}>
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>{modalMessage}</Text>
          <Button children="Confirm" onPress={onModalOk} color={colors.pinkMain} />
        </View>
      </Modal>
    </View>
  );
};

ConnectForm.displayName = 'ConnectForm';

const styles = StyleSheet.create({
  btn: { width: responsiveWidth(90) },

  btnLabel: {
    fontSize: responsiveFontSize(2.6),
    letterSpacing: 0,
    fontFamily: 'Lato-Regular',
  },
  modalContent: {
    backgroundColor: colors.iconWhite,
    padding: 22,
    justifyContent: 'center',
    alignItems: 'flex-end',
    borderRadius: 4,
    borderColor: 'rgba(0, 0, 0, 0.1)',
  },
  modalTitle: {
    fontSize: 20,
    marginBottom: 12,
    color: colors.greyVeryDark,
  },
});
export default ConnectForm;