import type { CSSProperties, InputHTMLAttributes } from "react";
import type { SxValue } from "../CSSFab";

export type ColorPickerSize = "small" | "medium" | "large";
export type ColorPickerFormat = "hex" | "rgb" | "hsl";
export type ColorPickerShowText = boolean | ColorPickerFormat;
export type ColorPickerI18nKey = "hex" | "rgb" | "hsl" | (string & {});
export type ColorPickerLocaleText = Partial<
  Record<"hex" | "rgb" | "hsl" | string, string>
>;

export interface ColorPickerProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, "style" | "className" | "size" | "type" | "value" | "onChange"> {
  /** 受控颜色值（HEX） */
  value?: string;
  /** 非受控默认颜色值 */
  defaultValue?: string;
  /** 颜色变化回调，参数为 HEX 值 */
  onChange?: (hex: string) => void;
  /** 是否禁用 */
  disabled?: boolean;
  /** 是否显示颜色文本；传格式字符串仅显示对应格式 */
  showText?: ColorPickerShowText;
  /** 文本输出格式（showText 为 true 时决定主格式） */
  format?: ColorPickerFormat;
  /** 尺寸变体 */
  size?: ColorPickerSize;
  /** Style extension via CSSFab sx */
  sx?: SxValue;
  style?: CSSProperties;
  className?: string;
  /** i18n key */
  i18nKey?: ColorPickerI18nKey;
  /** 覆盖 locale 文案 */
  localeText?: ColorPickerLocaleText;
}

declare function ColorPicker(props: ColorPickerProps): JSX.Element;

export { ColorPicker };
export default ColorPicker;