import React, { ReactElement } from "react";

//#region src/plus/clientCard/types.d.ts
interface ClientData {
  id: number;
  shop_id: number;
  display_name?: string;
  nickname?: string;
  email?: string;
  phone?: string;
  country_calling_code?: string;
  channel?: string;
  created_at: string;
  updated_at: string;
  waiver_form?: any;
  avatar?: string;
  birthday?: string;
  address?: string;
  tags?: string[];
  [key: string]: any;
}
type CardType = 'b1' | 'b2' | 'b5' | 'b9';
type Direction = 'horizontal' | 'vertical';
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string;
type AvatarShape = 'circle' | 'square';
interface AvatarConfig {
  icon?: string;
  shape?: AvatarShape;
  borderRadius?: number | string;
  size?: AvatarSize;
  useTextAvatar?: boolean;
  children?: string;
}
interface StatusConfig {
  color?: string;
}
interface NameStyle {
  fontSize?: number | string;
  fontWeight?: number | string;
  color?: string;
  textDecoration?: string;
}
interface TagItem {
  children: string;
  color: string;
}
interface TagConfig {
  placement?: 'separate' | 'inline';
  flexWrap?: 'nowrap' | 'wrap';
  gap?: number | string;
}
interface ExtraField {
  label?: string;
  value?: string;
  isShowLabel?: boolean;
  isShowValue?: boolean;
  icon?: string;
  iconSize?: number;
  iconColor?: string;
}
interface Slots {
  top?: React.ReactNode;
  bottom?: React.ReactNode;
  left?: React.ReactNode;
  right?: React.ReactNode;
}
interface StyleConfig {
  width?: number | string;
  border?: 'solid' | 'unset';
  borderWidth?: number | string;
  borderColor?: string;
  borderRadius?: number | string;
  padding?: number | string;
  [key: string]: any;
}
interface FieldNames {
  id?: string | ((data: any) => any);
  name?: string | ((data: any) => any);
  cover?: string | ((data: any) => any);
  phone?: string | ((data: any) => any);
  email?: string | ((data: any) => any);
  birthday?: string | ((data: any) => any);
  address?: string | ((data: any) => any);
  tags?: string | ((data: any) => any);
  [key: string]: string | ((data: any) => any) | undefined;
}
interface DisplayConfig {
  isShowAvatar?: boolean;
  isShowName?: boolean;
  isShowPhone?: boolean;
  isShowEmail?: boolean;
  isShowBirthday?: boolean;
  isShowAddress?: boolean;
  isShowTag?: boolean;
  isShowStatus?: boolean;
  isShowEmptyDescription?: boolean;
}
interface ClientCardProps extends DisplayConfig {
  type?: CardType;
  direction?: Direction;
  dataSource?: ClientData | any;
  fieldNames?: FieldNames;
  style?: StyleConfig;
  horizontalGap?: number | string;
  verticalGap?: number | string;
  avatar?: AvatarConfig;
  status?: StatusConfig;
  dropdown?: {
    open?: boolean;
    buttonProps?: {
      icon?: ReactElement;
      onClick?: (e: Event) => void;
      style?: React.CSSProperties;
    };
  };
  defaultName?: string;
  nameStyle?: NameStyle;
  tags?: Array<TagItem | string>;
  tag?: TagConfig;
  extraFields?: ExtraField[];
  slots?: Slots;
  onAddClient?: () => void;
  onChangeClient?: (data: ClientData) => void;
  onRemoveClient?: (data: ClientData) => void;
  onViewClient?: (data: ClientData) => void;
}
//#endregion
export { ClientCardProps };