import { InputAdornment } from '@mui/material';

import { type FormikValues, useFormikContext } from 'formik';
import {
  equals,
  gt,
  isEmpty,
  not,
  path,
  split,
  type as variableType
} from 'ramda';
import { type ChangeEvent, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { TextField, useMemoComponent } from '../..';
import { type InputPropsWithoutGroup, InputType } from './models';
import PasswordEndAdornment from './PasswordEndAdornment';

const Text = ({
  dataTestId,
  label,
  fieldName,
  type,
  required,
  getDisabled,
  getRequired,
  change,
  additionalMemoProps,
  text,
  autoFocus
}: InputPropsWithoutGroup): JSX.Element => {
  const { t } = useTranslation();

  const [isVisible, setIsVisible] = useState(false);

  const {
    values,
    setFieldValue,
    touched,
    errors,
    handleBlur,
    setFieldTouched,
    setValues,
    setTouched
  } = useFormikContext<FormikValues>();

  const fieldNamePath = split('.', fieldName);

  const changeText = (event: ChangeEvent<HTMLInputElement>): void => {
    const { value } = event.target;
    if (change) {
      change({
        setFieldTouched,
        setFieldValue,
        setTouched,
        setValues,
        value,
        values
      });

      return;
    }

    const formattedValue =
      equals(text?.type, 'number') && !isEmpty(value)
        ? Number.parseInt(value, 10)
        : value;

    setFieldValue(fieldName, formattedValue);
  };

  const changeVisibility = (): void => {
    setIsVisible((currentIsVisible) => !currentIsVisible);
  };

  const value = path(fieldNamePath, values);

  const error = path(fieldNamePath, touched)
    ? path(fieldNamePath, errors)
    : undefined;

  const EndAdornment = useCallback((): JSX.Element | null => {
    if (equals(type, InputType.Password)) {
      return (
        <PasswordEndAdornment
          changeVisibility={changeVisibility}
          isVisible={isVisible}
        />
      );
    }

    if (text?.endAdornment) {
      return (
        <InputAdornment position="end">{text?.endAdornment}</InputAdornment>
      );
    }

    return null;
  }, [isVisible, changeVisibility, text?.endAdornment, type]);

  const getInputType = (): string => {
    if (text?.type) {
      return text.type;
    }

    return equals(type, InputType.Password) && not(isVisible)
      ? 'password'
      : 'text';
  };

  const disabled = getDisabled?.(values) || false;
  const isRequired = required || getRequired?.(values) || false;

  const isMultiline =
    equals(variableType(text?.multilineRows), 'Number') &&
    gt(text?.multilineRows || 0, 0);
  const rows = isMultiline ? text?.multilineRows : undefined;

  return useMemoComponent({
    Component: (
      <TextField
        ariaLabel={t(label) || ''}
        autoFocus={autoFocus}
        data-testid-suffix={`test-${label}`}
        dataTestId={dataTestId || label}
        disabled={disabled}
        EndAdornment={EndAdornment}
        error={error as string | undefined}
        fullWidth={text?.fullWidth ?? true}
        label={t(label)}
        multiline={isMultiline}
        onBlur={handleBlur(fieldName)}
        onChange={changeText}
        placeholder={text?.placeholder}
        required={isRequired}
        rows={rows}
        textFieldSlotsAndSlotProps={{
          slotProps: {
            htmlInput: {
              'aria-label': label,
              'data-testid': dataTestId || label,
              min: text?.min
            }
          }
        }}
        type={getInputType()}
        value={(value || '') as string}
      />
    ),
    memoProps: [
      error,
      value,
      isVisible,
      disabled,
      isRequired,
      additionalMemoProps
    ]
  });
};

export default Text;