import React, { forwardRef } from 'react';
import cuid from 'cuid';
import isChromatic from 'chromatic/isChromatic';

import Call from '../../assets/icons/Call';
import PhoneAndroid from '../../assets/icons/PhoneAndroid';
import { Spacer } from '../../foundations/Layout';
import { filterGlobalProps } from '@lendi-ui/commons/utils';
import { ErrorText, HelpText, FieldLabel, ClearActionButton, useClearAction } from '../TextField';
import type { InputFieldBaseProps, InputProps } from '../TextField';

import { Input, PhoneIconWrapper, MobileIconWrapper, Wrapper } from './PhoneField.style';
import { getPattern } from './utils';
import { useTheme } from '../../foundations/Theme';
interface PhoneFieldProps extends Omit<InputFieldBaseProps, 'autocomplete'> {
  variant?: 'mobile';
}

export type PhoneFieldComponentProps = InputProps<PhoneFieldProps, string>;

const filterAlphabet = (value: string) => value.replace(/\D*/g, '');

const handleFormatting = (value?: string) => {
  // because we handle uncontrolled, this function could receive undefined.
  if (value) {
    return filterAlphabet(value);
  }

  return value;
};

const PhoneFieldComponent = (
  {
    inputId,
    name,
    variant,
    helpText,
    errorText,
    validationState,
    placeholder,
    ariaLabel,
    ariaLabelledBy,
    label,
    labelSuffix,
    inlineAction,
    isRequired,
    isDisabled,
    value,
    defaultValue,
    onChange,
    width = '100%',
    maxCharCount,
    minCharCount,
    minWidth,
    maxWidth,
    ...props
  }: PhoneFieldComponentProps,
  ref: React.Ref<HTMLInputElement>
) => {
  const globalProps = filterGlobalProps(props);

  const inputElId = isChromatic() ? '1' : inputId ?? cuid();
  const helpTextId = isChromatic() ? '2' : cuid();
  const errorTextId = isChromatic() ? '3' : cuid();
  const hasError = errorText && validationState === 'invalid';

  const theme = useTheme();

  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.value !== '') {
      e.target.value = handleFormatting(e.target.value) ?? '';
    }

    if (onChange) {
      onChange(e);
    }
  };

  const { isCleared, handleChange, clearValue } = useClearAction(handleValueChange, ref, value);

  const ariaDescribedBy = [];
  if (helpText) {
    ariaDescribedBy.push(helpTextId);
  }

  if (hasError) {
    ariaDescribedBy.push(errorTextId);
  }

  return (
    <Spacer ygap="xxs" width={width} maxWidth={maxWidth} minWidth={minWidth} {...globalProps}>
      {label && <FieldLabel forId={inputElId} label={label} labelSuffix={labelSuffix} />}

      <Spacer ygap="xxs">
        <Wrapper>
          {variant === 'mobile' ? (
            <MobileIconWrapper aria-hidden>
              <PhoneAndroid
                color={isDisabled ? theme.color.interaction.disabled : theme.color.text.subtle}
                width="24px"
                height="24px"
              />
            </MobileIconWrapper>
          ) : (
            <PhoneIconWrapper aria-hidden>
              <Call
                color={isDisabled ? theme.color.interaction.disabled : theme.color.text.subtle}
                width="24px"
                height="24px"
              />
            </PhoneIconWrapper>
          )}
          <Input
            id={inputElId}
            name={name}
            type="tel"
            autoComplete="tel"
            inputMode="tel"
            pattern={getPattern(variant)}
            placeholder={placeholder}
            validationState={validationState}
            aria-invalid={validationState === 'invalid'}
            aria-label={ariaLabel}
            aria-labelledby={ariaLabelledBy}
            aria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}
            required={isRequired}
            disabled={isDisabled}
            maxLength={maxCharCount}
            minLength={minCharCount}
            value={value && isCleared ? '' : handleFormatting(value)}
            defaultValue={handleFormatting(defaultValue)}
            onChange={handleChange}
            ref={ref}
            hasRightItem={!!inlineAction}
            variant={variant}
          />
          {inlineAction === 'clear' && <ClearActionButton isCleared={isCleared} clearValue={clearValue} />}
        </Wrapper>
        {helpText && <HelpText id={helpTextId} text={helpText} />}
        {hasError && errorText && <ErrorText id={errorTextId} text={errorText} />}
      </Spacer>
    </Spacer>
  );
};

export const PhoneField = forwardRef<HTMLInputElement, PhoneFieldComponentProps>(PhoneFieldComponent);