import { colors } from "data/dataMx";
import { TouchableOpacityProps } from "react-native";
import { CSSObject } from "styled-components";

export type ButtonColor = 'primary' | 'secondary' | 'custom';
export type ButtonType = 'button' | 'submit' | 'reset';
export type ButtonTypeDesign = 'ghost' | 'default' | 'icon' | 'outline';
export type ButtoniconTypeDesign = 'ghost' | 'default' | 'outline';
export type IconAlign = 'left' | 'right';
export type CustomColor =
  | 'tertiary'
  | 'quaternary'
  | 'quinary'
  | 'senary'
  | 'dark'
  | 'light'
  | 'neutral';
  export type ButtonSize = 'small' | 'medium' | 'large';

export interface IButtonProps extends TouchableOpacityProps {
  /** Text of button */
  text: string;
  /** Enable or disable the button*/
  disabled: boolean;
  /** Press action */
  onPress?: (e?: any) => void;
  /** Type of styled */
  color: ButtonColor;
  /** Size of component + measurement unit (we recommend using px) */
  width?: string;
  /** Custom color from color palette */
  customColor?: CustomColor;
  /** Css proprieties */
  styles?: CSSObject;
  /** Size Button */
  size?: ButtonSize;
  /* indicates in the case of group buttons if the will work normal or as toggle buttons */
  groupStyle?: 'normal'|'toggle';
  /* in case that the buttons is used as toggle, indicate which button is selected */
  selected?: boolean;
}

export interface IStylesTheme {
  color: string;
  backgroundColor: string;
  borderColor: string;
  borderWidth: string;
  width?: string;
}

export interface IthemeB {
  color: string,
  backgroundColor?: colors,
  width: string,
  borderColor?: string;
  borderWidth: string;
}

export const ButtonHeight = {
  small: '32px',
  medium: '48px',
  large: '64px'
}