import React from 'react';
import { formatValue } from 'react-currency-input-field';

import { ColorTokens } from '../../../foundation/Colors';
import { TypographyTokens } from '../../../foundation/Typography';
import { browserI18n } from '../../../utils/browser-i18n';
import { ExclaimTooltipProps } from '../../ExclaimTooltip';
import { TooltipLabel } from '../../TooltipLabel';
import { FieldStyleProps } from '../_common/common.styled';
import { MaxConfig } from '../_common/types';
import { CurrencyFieldBox, CurrencyInputStyled } from './CurrencyField.styled';

type CurrencyFieldProps = {
  allowNegativeValue?: boolean;
  'data-testid'?: string;
  decimalsLimit?: number;

  defaultValue?: number | string;
  disabled?: boolean;
  error?: boolean;
  id?: string;
  label?: string;
  labelAttentionIndicatorColorToken?: ColorTokens;
  labelColorToken?: ColorTokens;
  labelTypographyToken?: TypographyTokens;
  locale?: string;
  max?: MaxConfig;
  maxLength?: number | undefined;
  min?: number | string | undefined;
  onBlur?: () => void;
  onChange?: (value: string | undefined) => void;
  onFocus?: () => void;
  placeholder?: string;
  step?: number;
  suffix?: string;
  tooltip?: ExclaimTooltipProps['children'];
  tooltipColorToken?: ColorTokens;
  value?: string;
} & FieldStyleProps;

export const CurrencyField: React.FunctionComponent<CurrencyFieldProps> = ({
  onChange,
  decimalsLimit = 2,
  maxLength = 18,
  value = '',
  defaultValue,
  disabled,
  error,
  suffix,
  allowNegativeValue,
  labelColorToken = 'white300',
  labelTypographyToken = 'bodySmallMedium',
  label,
  tooltipColorToken,
  tooltip,
  onBlur,
  step,
  min,
  max,
  placeholder,
  'data-testid': dataTestId,
  typographyToken = 'bodySmallMedium',
  labelAttentionIndicatorColorToken,
  borderColorToken = 'black700',
  backgroundColorToken = 'black900',
  hoverBackgroundColorToken = 'black800',
  disabledBackgroundColorToken = 'black900',
  placeholderColorToken = 'white950',
  disabledColorToken = 'white950',
  errorBorderColorToken = 'error800',
  errorColorToken = 'error400',
  colorToken = 'white100',
  hoverBorderColorToken = 'black700',
  hoverErrorBorderColorToken = 'error800',
  hoverColorToken = colorToken,
  hoverErrorColorToken = 'error100',
  disabledBorderColorToken = 'black700',
  locale = navigator.language,
  id,
  onFocus,
}) => {
  const { thousands } = browserI18n(locale);
  const cleanedValue = value.replace(new RegExp(`\\${thousands}`, 'g'), '');
  const handleOnChange = (newValue: string | undefined) => {
    if (newValue === cleanedValue) {
      return;
    }
    typeof onChange === 'function' && onChange(newValue);
  };

  return (
    <CurrencyFieldBox data-testid="CurrencyField-CurrencyFieldBox">
      <TooltipLabel
        attentionIndicatorColorToken={labelAttentionIndicatorColorToken}
        label={label}
        labelColorToken={labelColorToken}
        labelTypographyToken={labelTypographyToken}
        tooltip={tooltip}
        tooltipColorToken={tooltipColorToken}
      />
      <CurrencyInputStyled
        allowNegativeValue={allowNegativeValue}
        autoComplete="off"
        backgroundColorToken={backgroundColorToken}
        borderColorToken={borderColorToken}
        colorToken={colorToken}
        data-testid={dataTestId || 'CurrencyField-CurrencyInputStyled'}
        decimalsLimit={decimalsLimit}
        defaultValue={
          defaultValue ||
          formatValue({
            intlConfig: { locale },
            value: '0',
          })
        }
        disabled={disabled}
        disabledBackgroundColorToken={disabledBackgroundColorToken}
        disabledBorderColorToken={disabledBorderColorToken}
        disabledColorToken={disabledColorToken}
        error={error}
        errorBorderColorToken={errorBorderColorToken}
        errorColorToken={errorColorToken}
        hoverBackgroundColorToken={hoverBackgroundColorToken}
        hoverBorderColorToken={hoverBorderColorToken}
        hoverColorToken={hoverColorToken}
        hoverErrorBorderColorToken={hoverErrorBorderColorToken}
        hoverErrorColorToken={hoverErrorColorToken}
        id={id}
        intlConfig={{ locale }}
        max={max ? max.value : undefined}
        maxLength={maxLength}
        min={min}
        placeholder={placeholder}
        placeholderColorToken={placeholderColorToken}
        step={step}
        suffix={suffix}
        typographyToken={typographyToken}
        value={cleanedValue}
        onBlur={onBlur}
        onFocus={onFocus}
        onValueChange={handleOnChange}
      />
    </CurrencyFieldBox>
  );
};