import React, { type RefAttributes } from 'react';
import classNames from 'classnames';

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

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

const EyeIcons = Object.freeze({
  revealed: 'shp-preview',
  hidden: 'shp-preview-off',
} as const);

/** @inheritdoc */
export interface PasswordInputProps
  extends
    SafeOmit<CommonInputProps, 'label' | 'value' | 'defaultValue'>,
    PlaceholderProps,
    RefAttributes<HTMLInputElement> {
  label?: string;
  value?: string;
  defaultValue?: string;
  width?: SafeExtract<Size, 'md' | 'lg'>;
  /** Display loading indicator. */
  loading?: boolean;
  /**
   * The controlled revealed state. When `true`, the password is shown as plain text.
   * Pair with `onRevealedChange`. When set, the component never changes the state itself.
   */
  revealed?: boolean;
  /**
   * The uncontrolled default revealed state. When uncontrolled, the password is
   * automatically hidden again once focus leaves the component.
   * @default false
   */
  defaultRevealed?: boolean;
  /** Called when the reveal toggle — or focus leaving the component — requests a revealed state change. */
  onRevealedChange?: (revealed: boolean) => void;
  /**
   * Accessible label of the reveal toggle button.
   * @default the translated "Show password"
   */
  toggleA11yLabel?: string;
}

type GetInputClassName = Complete<Pick<PasswordInputProps, 'width' | 'error' | 'warning'>>;

const getPasswordInputClassName = ({ width, error, warning }: GetInputClassName) =>
  classNames('passwordField', width, {
    'error-field': error,
    'warning-field': warning && !error,
  });

export const PasswordInput = ({
  width = 'md',
  error,
  warning,
  label,
  value,
  defaultValue,
  loading,
  disabled,
  revealed,
  defaultRevealed,
  onRevealedChange,
  onChange,
  toggleA11yLabel,
  ref,
  ...rest
}: PasswordInputProps) => {
  rest satisfies Exact<
    SafeOmit<
      PasswordInputProps,
      | 'width'
      | 'error'
      | 'warning'
      | 'label'
      | 'value'
      | 'defaultValue'
      | 'loading'
      | 'disabled'
      | 'revealed'
      | 'defaultRevealed'
      | 'onRevealedChange'
      | 'onChange'
      | 'toggleA11yLabel'
      | 'ref'
    >,
    typeof rest
  >;

  return (
    <CorePasswordInput
      value={value}
      defaultValue={defaultValue}
      onChange={onChange}
      disabled={disabled}
      revealed={revealed}
      defaultRevealed={defaultRevealed}
      onRevealedChange={onRevealedChange}
      unwrapped
    >
      {({ props: containerProps }) => (
        <span {...containerProps} className={classNames(containerProps.className, 'passwordField__control')}>
          <span className='v2FormField__inputInner'>
            <InputLoader loading={loading}>
              <CorePasswordInput.Input
                ref={ref}
                className={getPasswordInputClassName({ width, error, warning })}
                invalid={!!error}
                a11yLabel={label}
                {...rest}
              />
            </InputLoader>
          </span>
          <CorePasswordInput.Toggle a11yLabel={toggleA11yLabel} unwrapped>
            {({ state, props }) => (
              <IconButton {...props} ghost icon={state.revealed ? EyeIcons.revealed : EyeIcons.hidden} />
            )}
          </CorePasswordInput.Toggle>
        </span>
      )}
    </CorePasswordInput>
  );
};

PasswordInput.displayName = 'PasswordInput';