import React from 'react';
import classNames from 'classnames';

import { PhoneInput as CorePhoneInput } from '@shoptet/ui-core-web';
import type { SafeOmit } from '@shoptet/utils';

import type { Exact, SafeExtract, Size } from '../../../types';
import type { CommonInputProps, PlaceholderProps } from '../types';

export interface PhoneInputProps extends CommonInputProps, PlaceholderProps {
  value?: string;
  defaultValue?: string;
  width?: SafeExtract<Size, 'md' | 'lg'>;
}

export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
  ({ width, error, warning, label, ...rest }, ref) => {
    rest satisfies Exact<SafeOmit<PhoneInputProps, 'width' | 'error' | 'warning' | 'label'>, typeof rest>;

    return (
      <CorePhoneInput
        ref={ref}
        className={classNames('phoneField', width, {
          'error-field': error,
          'warning-field': warning && !error,
        })}
        invalid={!!error}
        a11yLabel={label}
        {...rest}
      />
    );
  }
);

PhoneInput.displayName = 'PhoneInput';