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

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

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

/** @inheritdoc */
export interface EmailInputProps extends CommonInputProps, PlaceholderProps {
  value?: string;
  defaultValue?: string;
  width?: SafeExtract<Size, 'md' | 'lg'>;
}

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

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

EmailInput.displayName = 'EmailInput';