import React, { ReactNode } 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 { TokenIcon, TokenIconProps } from '../../Icons';
import { ToggleCaret } from '../../ToggleCaret';
import { TokenTypography } from '../../TokenTypography';
import { TooltipLabel } from '../../TooltipLabel';
import { Typography } from '../../Typography';
import { FieldStyleProps } from '../_common/common.styled';
import { MaxConfig } from '../_common/types';
import {
  BottomBox,
  CurrencyInputBox,
  CurrencyInputStyled,
  InputTokenAndMaxBox,
  MaxButton,
  PrefixBox,
  TokenAndMaxBox,
  TokenBox,
  TokenLabelFieldBox,
  TokenSelect,
  TopBox,
  TopRightText,
} from './TokenLabelField.styled';

export type TokenLabelFieldProps = {
  allowNegativeValue?: boolean;
  autoFocus?: boolean;
  bottomLeftText?: string;
  bottomLeftTextColorToken?: ColorTokens;
  bottomLeftTextTypographyToken?: TypographyTokens;
  bottomRightTextColorToken?: ColorTokens;
  bottomRightTextDifferenceColorToken?: ColorTokens;
  bottomRightTextDifferenceValue?: number;
  bottomRightTextToken?: string;
  bottomRightTextTokenColorToken?: ColorTokens;
  bottomRightTextTypographyToken?: TypographyTokens;
  bottomRightTextValue?: string | number;
  className?: string;
  decimalsLimit?: number;
  defaultValue?: number | string;
  disabled?: boolean;
  error?: boolean;
  hideTokenIcon?: boolean;
  id?: string;
  label?: string;
  labelAttentionIndicatorColorToken?: ColorTokens;
  labelColorToken?: ColorTokens;
  labelTypographyToken?: TypographyTokens;
  locale?: string;
  max?: MaxConfig;
  maxLength?: number;
  min?: number;
  onBlur?: () => void;
  onChange?: (value: string | undefined) => void;
  onFocus?: () => void;
  onTokenOptionSelected?: (selectedToken: string) => void;
  placeholder?: string;
  prefixToken?: string;
  step?: number;
  token?: TokenIconProps['token'] | ReactNode;
  tokenColorToken?: ColorTokens;
  tokenFormatter?: (token: string | undefined) => string;
  tokenOptions?: string[];
  tokenTypographyToken?: TypographyTokens;
  tooltip?: ExclaimTooltipProps['children'];
  topRightText?: string;
  topRightTextColorToken?: ColorTokens;
  topRightTextTypographyToken?: TypographyTokens;
  value?: string;
} & FieldStyleProps;

const defaultTokenFormatter = (token: string | undefined) => token;

export const TokenLabelField: React.FunctionComponent<TokenLabelFieldProps> = ({
  onChange,
  autoFocus = false,
  decimalsLimit = 2,
  maxLength = 18,
  value = '',
  defaultValue,
  disabled = false,
  error,
  typographyToken = 'bodyMediumBold',
  placeholder,
  labelColorToken = 'white300',
  labelTypographyToken = 'bodySmallMedium',
  tooltip,
  label,
  className,
  topRightTextTypographyToken = 'bodyXSmallMedium',
  topRightTextColorToken = 'white300',
  topRightText,
  bottomLeftTextTypographyToken = 'bodyXSmallMedium',
  bottomLeftTextColorToken = 'white300',
  bottomLeftText,
  token,
  bottomRightTextTypographyToken = 'bodyXSmallMedium',
  bottomRightTextColorToken = 'white950',
  bottomRightTextDifferenceColorToken,
  bottomRightTextTokenColorToken,
  bottomRightTextValue,
  bottomRightTextToken,
  bottomRightTextDifferenceValue,
  allowNegativeValue,
  onBlur,
  onFocus,
  min,
  max,
  step,
  labelAttentionIndicatorColorToken,
  tokenFormatter = defaultTokenFormatter,
  tokenOptions = [],
  onTokenOptionSelected,
  prefixToken,
  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',
  hideTokenIcon = false,
  tokenColorToken = 'white100',
  tokenTypographyToken = 'bodyMediumMedium',
  locale = navigator.language,
  id,
}) => {
  const { thousands } = browserI18n(locale);
  const cleanedValue = value.replace(new RegExp(`\\${thousands}`, 'g'), '');
  const hasMaxButton = Boolean(max && max.showButton);
  const handleOnChange = (newValue: string | undefined) => {
    if (newValue === cleanedValue) {
      return;
    }
    typeof onChange === 'function' && onChange(newValue);
  };

  const handleOnTokenOptionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    onTokenOptionSelected && onTokenOptionSelected(event.target.value);
  };

  const bottomRightTextTokenComputed = bottomRightTextToken
    ? bottomRightTextToken
    : typeof token === 'string' && tokenFormatter(token);
  const hasPrefixToken = Boolean(prefixToken);
  const hasTokenOptions = tokenOptions?.length !== 0;
  return (
    <TokenLabelFieldBox data-testid="TokenLabelField-TokenLabelFieldBox">
      <CurrencyInputBox
        backgroundColorToken={backgroundColorToken}
        borderColorToken={borderColorToken}
        className={className}
        colorToken={colorToken}
        data-testid="TokenLabelField-CurrencyInputBox"
        disabled={disabled}
        disabledBackgroundColorToken={disabledBackgroundColorToken}
        disabledBorderColorToken={disabledBorderColorToken}
        disabledColorToken={disabledColorToken}
        errorBorderColorToken={errorBorderColorToken}
        errorColorToken={errorColorToken}
        hoverBackgroundColorToken={hoverBackgroundColorToken}
        hoverBorderColorToken={hoverBorderColorToken}
        hoverColorToken={hoverColorToken}
        hoverErrorBorderColorToken={hoverErrorBorderColorToken}
        hoverErrorColorToken={hoverErrorColorToken}
        placeholderColorToken={placeholderColorToken}
      >
        <TopBox data-testid="TokenLabelField-TopBox">
          <TooltipLabel
            attentionIndicatorColorToken={labelAttentionIndicatorColorToken}
            data-testid="TokenLabelField-TopBox-TooltipLabel"
            label={label}
            labelColorToken={labelColorToken}
            labelTypographyToken={labelTypographyToken}
            tooltip={tooltip}
            tooltipColorToken={labelColorToken}
          />
          {topRightText ? (
            <TopRightText
              colorToken={topRightTextColorToken}
              data-testid="TokenLabelField-TopBox-Typography"
              typographyToken={topRightTextTypographyToken}
            >
              {topRightText}
            </TopRightText>
          ) : null}
        </TopBox>
        <InputTokenAndMaxBox data-testid="TokenLabelField-InputTokenAndMaxBox">
          {hasPrefixToken ? (
            <PrefixBox>
              <Typography colorToken="white950" typographyToken={typographyToken}>
                {prefixToken}
              </Typography>
            </PrefixBox>
          ) : null}
          <CurrencyInputStyled
            allowNegativeValue={allowNegativeValue}
            autoComplete="off"
            autoFocus={autoFocus}
            data-testid="TokenLabelField-CurrencyInputBox-CurrencyInputStyled"
            decimalsLimit={decimalsLimit}
            defaultValue={
              defaultValue ||
              formatValue({
                intlConfig: { locale },
                value: '0',
              })
            }
            disabled={disabled}
            error={error}
            id={id}
            intlConfig={{ locale }}
            max={max ? max.value : undefined}
            maxLength={maxLength}
            min={min}
            placeholder={placeholder}
            step={step}
            transformRawValue={(raw) => raw.replace(/\s/g, '').replace(/,/g, '.')}
            typographyToken={typographyToken}
            value={cleanedValue}
            onBlur={onBlur}
            onFocus={onFocus}
            onValueChange={handleOnChange}
          />
          <TokenAndMaxBox data-testid="TokenLabelField-TokenAndMaxBox">
            {hasMaxButton ? (
              <MaxButton
                backgroundColorToken={disabled ? 'black800' : 'black700'}
                borderColorToken="black700"
                data-testid="TokenLabelField-MaxButton"
                disabled={disabled}
                hoverBorderColorToken={disabled ? 'black800' : 'black500'}
                rounded={true}
                typographyColorToken={disabled ? 'black200' : 'white950'}
                typographyToken="bodyXSmallMedium"
                onClick={max?.onClick}
              >
                Max
              </MaxButton>
            ) : null}
            {token || hasTokenOptions ? (
              typeof token === 'string' ? (
                <TokenBox data-testid="TokenLabelField-CurrencyInputBox-TokenBox">
                  {!token || hideTokenIcon ? null : (
                    <TokenIcon
                      data-testid={`TokenLabelField-CurrencyInputBox-TokenBox-TokenIcon-${token}`}
                      size={22}
                      token={token}
                    />
                  )}
                  {!hasTokenOptions ? (
                    <Typography
                      colorToken={tokenColorToken}
                      data-testid="TokenLabelField-CurrencyInputBox-TokenBox-Typography"
                      typographyToken={tokenTypographyToken}
                      whiteSpace="nowrap"
                    >
                      {tokenFormatter(token)}
                    </Typography>
                  ) : null}
                  {hasTokenOptions ? (
                    <>
                      <ToggleCaret isOpen={false} />
                      <TokenSelect
                        data-testid="TokenLabelField-TokenSelect"
                        value={token}
                        onChange={handleOnTokenOptionChange}
                      >
                        {tokenOptions.map((tokenOption) => (
                          <option key={tokenOption} value={tokenOption}>
                            {tokenFormatter(tokenOption)}
                          </option>
                        ))}
                      </TokenSelect>
                    </>
                  ) : null}
                </TokenBox>
              ) : (
                token
              )
            ) : null}
          </TokenAndMaxBox>
        </InputTokenAndMaxBox>
      </CurrencyInputBox>
      {bottomLeftText && bottomRightTextValue ? (
        <BottomBox data-testid="TokenLabelField-BottomBox">
          {bottomLeftText ? (
            <Typography
              colorToken={bottomLeftTextColorToken}
              data-testid="TokenLabelField-BottomBox-Typography"
              typographyToken={bottomLeftTextTypographyToken}
            >
              {bottomLeftText}
            </Typography>
          ) : null}
          {bottomRightTextValue ? (
            <TokenTypography
              colorToken={bottomRightTextColorToken}
              data-testid="TokenLabelField-BottomBox-TokenTypography"
              differenceColorToken={bottomRightTextDifferenceColorToken}
              differenceToken={
                bottomRightTextTokenComputed ? ` ${bottomRightTextTokenComputed}` : ''
              }
              differenceValue={bottomRightTextDifferenceValue}
              token={bottomRightTextTokenComputed ? ` ${bottomRightTextTokenComputed}` : ''}
              tokenColorToken={bottomRightTextTokenColorToken}
              typographyToken={bottomRightTextTypographyToken}
              value={bottomRightTextValue}
            />
          ) : null}
        </BottomBox>
      ) : null}
    </TokenLabelFieldBox>
  );
};