import { InputHTMLAttributes, ReactElement, PropsWithChildren, ElementType } from 'react';
import { TypographyProps } from '../Typography/Typography.types.js';
import { BaseProps } from '../types.js';
import { ClayProps } from '../utilities/Clay/Clay.types.js';
import '@imwebme/clay-token';
import '@emotion/react';

type TextfieldInputProps = InputHTMLAttributes<HTMLInputElement> & {
    isValid?: boolean;
    align?: "left" | "right";
    onChangeText?: (text: string) => void;
};
type PreOrSuffix = ReactElement | "search" | "characterCount";
type TextfieldSetProps = PropsWithChildren & Pick<TextfieldInputProps, "value" | "maxLength" | "onChange" | "isValid" | "onChangeText">;
type TextfieldBoxProps<E extends ElementType> = PropsWithChildren & BaseProps<E> & {
    /**
     * secondary variant는 가까운 minor 버전에서 제거될 예정입니다. filled variant로 교체해주세요
     */
    variant?: "outlined" | "secondary" | "filled";
    /**
     * size를 결정합니다.
     *
     * @default 'medium'
     */
    size?: "medium" | "large";
    /**
     * width 는 `full` width와 `80px`, `120px`, `160px`, `240px`만 가능합니다.
     * 다만, 개발 편의성을 위해 string 타입도 가능하도록 작성해두었습니다.
     * 만약 지정된 width가 아닌 다른 너비가 사용되었다면 제보 부탁드립니다.
     *
     * @default "full"
     */
    width?: "80px" | "120px" | "160px" | "240px" | "full" | (string & {});
};
type TextfieldAddonProps<Element extends ElementType> = ClayProps<Element>;
type TextfieldHelperTextProps<Element extends ElementType> = PropsWithChildren<TypographyProps<Element>>;

export { PreOrSuffix, TextfieldAddonProps, TextfieldBoxProps, TextfieldHelperTextProps, TextfieldInputProps, TextfieldSetProps };