import React, { Component } from 'react'

import { TextInputProps, StyleProp, ViewStyle, TextStyle, ImageStyle, TouchableOpacityProps, KeyboardTypeOptions, TextProps, FlatListProps, ScrollViewProps, ImageSourcePropType, Animated, FlexStyle, LayoutChangeEvent, ShadowStyleIOS, TransformsStyle, ImageResizeMode, ViewProps, TouchableHighlight, Insets } from 'react-native';
import { IOSWebViewProps, AndroidWebViewProps } from './components/webview/lib/WebViewTypes';

/**
 * Button
 */
export type ButtonType = 'primary' | 'disabled' | 'disabledBorder' | 'danger' | 'outline' | 'secondary' | 'dashed' | 'indifferent';

export type ButtonSize = 'small' | 'medium' | 'large'

export type AvatarQuality = 'low' | 'medium' | 'high'
export type AvatarSize = 'tiny' | 'small' | 'medium' | 'large' | 'giant' | 'size8' | 'size24' | 'size36' | 'size44'
  | 'size48' | 'size52' | 'size56' | 'size64' | 'size72' | 'size80' | 'size88' | 'size96' | {
    width: Number, height: Number, borderRadius: Number
  }

interface CustomButtonProps {
  type?: ButtonType;
  title: string;
  icon?: object | number;
  rightIcon?: object | number;
  style?: StyleProp<ViewStyle>;
  rounded?: boolean;
  size?: ButtonSize;
  countdown?: number;
  delay?: number;
  buttonStyle?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  iconStyle?: StyleProp<ImageStyle>;
  onCountdownEnd?: () => void;
  onPress?: () => void
}

export class Button extends React.Component<CustomButtonProps> {
  static startTimmer(second, callbackWhenEnd: Function): Void
}

/**
 * IconText
 */

interface IconTextProps {
  source?: object | number | string;
  defaultIcon?: object | number | string;
  title?: string;
  style?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  iconStyle?: StyleProp<ImageStyle>;
  size?: AvatarSize;
  iconContainerStyle?: StyleProp<ViewStyle>;
  onPress?: () => void;
  overlayComponent: JSX.Element
}

export class IconText extends React.Component<IconTextProps>{ }

/**
 * BrandInfo
 */

interface BrandInfoProps {
  source?: object | number;
  title?: string;
  body?: string;
  rightIcon?: object | number;
  style?: object;
  logoBordered?: boolean;
  borderStyle?: StyleProp<ViewStyle>;
  bodyStyle?: StyleProp<TextStyle>;
  rightIconStyle?: StyleProp<ImageStyle>;
  leftIconStyle?: StyleProp<ImageStyle>;
  alignCentered?: boolean;
  rightComponent?: any;
  maxNumberOfLines?: number;
  titleMaxLines?: number;
  resizeMode?: ImageResizeMode;
  onPress?: () => void;
}

export class BrandInfo extends React.Component<BrandInfoProps>{ }


/**
 * SelectItem
 */

interface SelectionItemProps {
  style?: object;
  leftIcon?: object | number | string;
  rightIcon?: object | number, // null to hide, default show
  title?: string;
  body?: string;
  alignCentered?: boolean;
  rightTitle?: string;
  rightButtonTitle?: string;
  rightComponent?: JSX.Element;
  leftComponent?: JSX.Element;
  leftIconStyle?: StyleProp<ImageStyle>;
  rightIconStyle?: StyleProp<ImageStyle>;
  rightTitleStyle?: StyleProp<TextStyle>;
  rightButtonStyle?: StyleProp<ViewStyle>;
  rightButtonTitleStyle?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  bodyStyle?: StyleProp<TextStyle>;
  detailStyle?: StyleProp<TextStyle>;
  contentStyle?: StyleProp<ViewStyle>;
  disabledPress?: boolean;
  onPress?: () => void;
  onButtonPress?: () => void;
}

export class SelectionItem extends React.Component<SelectionItem> { }

/**
 * DisplayPopup
 */

interface DisplayPopupProps {
  title?: string;
  content?: string;
  actionButton?: string;
  closeButton?: string;
  buttonType?: ButtonType;
  hideCloseIcon?: boolean;
  buttonIcon?: object | number;
  buttonRightIcon?: object | number;
  actionButtonType?: 'button' | 'text';
  contentStyle?: StyleProp<ViewStyle>;
  closeButtonType?: ButtonType;
  buttonContainerStyle?: StyleProp<ViewStyle>;
  buttonSeparatorStyle?: StyleProp<ViewStyle>;
  renderCustomCloseButton?: () => JSX.Element;
  renderCustomContent?: () => JSX.Element;
  onPressIconClose?: () => void;
  onPressAction?: () => void;
  onPressClose?: () => void;
}

export class DisplayPopup extends React.Component<DisplayPopupProps> { }


/**
 * TextInput
 */

interface BankCardType extends Object {
  cardType?: string;
  cardUrl?: string;
  regex?: RegExp | string
}


interface CustomTextInputProps extends TextInputProps {
  icon?: object | number;
  leftIcon?: object | number;
  cancellable?: boolean;
  regex?: RegExp;
  style?: StyleProp<ViewStyle>;
  error?: boolean;
  errorMessage?: string;
  focusBackgroundColor?: string;
  inputType?: 'money' | 'normal' | 'bankCard' | 'date' | 'percent'
  formatDate?: 'dd/mm/yyyy' | 'dd-mm-yyyy' | 'yyyy-mm-dd' | 'yyyy/mm/dd';
  regexData?: Array<BankCardType>;
  showCardType?: boolean;
  matchRegex?: boolean;
  removeAccent?: boolean;
  rightComponent?: any;
  hideErrorMessageIcon?: boolean;
  focusBorderColor?: string;
  useErrorMessageInRegex?: boolean;
  regexOnBlur?: RegExp;
  errorMessageOnBlur?: string;
  regexCheckTimeout?: number;
  hideMessageError?: boolean;
  positiveNumber?: boolean;
  showCheckIcon?: boolean;
  currencyUnit?: string;
  leftIconStyle?: StyleProp<ImageStyle>;
  iconStyle?: StyleProp<ImageStyle>;
  textStyle?: StyleProp<TextStyle>;
  focusStyle?: StyleProp<ViewStyle>;
  bankCardArray?: Array<string>
  footerComponent?: any;
  contentContainerStyle?: StyleProp<ViewStyle>;
  secureTextEntry?: boolean;
  initWithDots?: boolean;
  onClearPress?: () => Boolean;
  onValidateOnBlur?: (matched: boolean) => void;
  onLeftIconPress?: () => void;
  onIconPress?: () => void;
  onValidate?: (matched: boolean) => void, //callback if input matched or mismatch with regex, fire when match state change
  onPress?: () => void;
  floatingValue?: string;
  floatingIcon?: any;
  onPressFloating?: () => void;
  disabled?: boolean;
  floatingIconStyle?: object | [];
  currencyStyle?: object | [];
  type?: 'medium' | 'large' | 'small';
  isFormatBankCard?: boolean;
  floatingNumberOfLines?: number;
  textDotStyle?: object | [];
  secureTextHide?: boolean;
  supportGesture?: boolean;
}

export class Input extends React.Component<CustomTextInputProps> { }


/**
 * CinemaInfo
 */

interface CinemaInfoProps {
  body?: string;
  distance?: string;
  title?: string;
  style?: StyleProp<ViewStyle>;
  tag?: string;
  onLocationPress?: () => void;
  onPricePress?: () => void;
  onPress?: () => void
}

export class CinemaInfo extends React.Component<CinemaInfoProps> { }


/**
 * Avatar
 */

export type SubIconType = 'momo' | 'online' | 'key' | 'none';

interface AvatarProps {
  name?: string;
  resizeMode?: string;
  size?: AvatarSize;
  quality?: AvatarQuality;
  source?: object | number | string;
  subIcon?: SubIconType;
  style?: StyleProp<ViewStyle>;
  loading?: boolean;
  subIconSource?: object | number | string;
  onPress?: () => void
  cached?: boolean;
}

export class Avatar extends React.Component<AvatarProps> { }

/**
 * RoundTextInput
 */

interface RoundTextInputProps extends TextInputProps {
  clearOnRightPress?: boolean;
  leftIcon?: object | number;
  rightIcon?: object | number;
  initWithDots?: boolean, // default true, will init with place holder
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  leftIconStyle?: StyleProp<ImageStyle>;
  rightIconStyle?: StyleProp<ImageStyle>;
  rightComponent?: any;
  disableFocus?: boolean;
  onLeftIconPress?: () => void;
  onRightIconPress?: () => void;
}

export class RoundTextInput extends React.Component<RoundTextInputProps> { }

/**
 * UserShortedInfo
 */

interface UserShortedInfoProps {
  avatar?: object | number | string;
  borderColor?: string;
  borderWidth?: number;
  name?: string;
  phone?: string;
  avatarSize?: AvatarSize;
  subIconType?: SubIconType;
  nameStyle?: StyleProp<TextStyle>;
  phoneStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
  onPress?: () => void;
}

export class UserShortedInfo extends React.Component<UserShortedInfoProps> { }


/**
 * UnderlineTextInput
 */
interface UnderlineTextInputProps extends TextInputProps {
  clearOnRightPress?: boolean;
  errorMessage?: string;
  maxLengthText?: string;
  regex?: RegExp;
  rightIcon?: object | number;
  floatingValue?: string;
  rightComponent?: any;
  matchRegex?: boolean;
  inputType?: 'money' | 'date' | 'normal' | 'bankCard';
  formatDate?: 'dd/mm/yyyy' | 'dd-mm-yyyy';
  errorMessageStyle?: StyleProp<TextStyle>;
  lengthCounterStyle?: StyleProp<TextStyle>;
  floatingStyle?: StyleProp<TextStyle>;
  floatingIconStyle?: StyleProp<ImageStyle>;
  floatingIcon?: ImageSourcePropType | string;
  rightIconStyle?: StyleProp<ImageStyle>;
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  underlineStyle?: StyleProp<ViewStyle>;
  alwaysShowRightIcon?: boolean;
  forceDisplayError?: boolean;
  onRightIconPress?: () => void;
  onValidate?: (result: boolean) => void;
}

export class UnderlineTextInput extends React.Component<UnderlineTextInputProps> { }

export type CalculatorTextInputKeyboardType = 'calculator'

interface CalculatorTextInputProps extends Omit<TextInputProps, "keyboardType" | "onChangeText"> {
  clearOnRightPress?: boolean;
  currencyUnit?: string;
  errorMessage?: string;
  errorMessageStyle?: StyleProp<TextStyle>;
  rightIcon?: object | number;
  rightIconStyle?: StyleProp<ImageStyle>;
  style?: StyleProp<ViewStyle>;
  textFloating?: string;
  textFloatingStyle?: StyleProp<TextStyle>;
  textStyle?: StyleProp<TextStyle>;
  keyboardType?: KeyboardTypeOptions | CalculatorTextInputKeyboardType;
  onPressKeyboard?: () => void;
  /**
   *
   * @param calculatedValue value in number type, after calculated, ex: 6
   * @param value value contains number with operators + - × ÷, ex: 2 × 3
   * @param isCalculating value contains operators + - × ÷
   */
  onChangeText?: (calculatedValue: number, value: string, isCalculating: boolean) => void;
  onRightIconPress?: () => void;
}

export class CalculatorTextInput extends React.Component<CalculatorTextInputProps> { }

/**
 * KeyboardHeaderSticky
 * note: only support for CalculatorTextInput
 */

interface KeyboardHeaderStickyProps {
  duration?: number;
  style?: StyleProp<ViewStyle>;
  bottomOffset?: number;
  useKeyboardAvoidView?: boolean // if parent has KeyboardAvoidView
}

export class KeyboardHeaderSticky extends React.Component<KeyboardHeaderStickyProps> { }


/**
 * MoneySuggestionList
 */

interface MoneySuggestionListProps {
  defaultData?: Array<Number>
  amount?: String;
  style?: StyleProp<ViewStyle>;
  min?: Number;
  max?: Number;
  calculating?: boolean; // display = symbol before first number or not: ex "= 1.000";
  rightButton?: String;
  itemTextStyle?: StyleProp<TextStyle>;
  itemContainerStyle?: StyleProp<ViewStyle>;
  hitSlop?: Insets;
  onButtonPress?: () => void;
  onPress?: () => void;
  listContainerStyle?: StyleProp<ViewStyle>;
}

export class MoneySuggestionList extends React.Component<MoneySuggestionListProps> {
  static show?: () => void; // default, show money suggestion list

  static hide?: () => void; // hide list
}

/**
* Switch
*/
export type SwitchLabelPosition = 'left' | 'right';
interface SwitchProps {
  style?: StyleProp<ViewStyle>;
  switchStyle?: StyleProp<ViewStyle>;
  title?: {
    text?: string;
    style?: StyleProp<ViewStyle>;
    position?: SwitchLabelPosition;
    numberOfLines?: number;
    disableStyle?: StyleProp<ViewStyle>
  };
  activeStyle?: {
    text?: string;
    style?: StyleProp<ViewStyle>;
    backgroundColor?: string
  };
  inactiveStyle?: {
    text?: string;
    style?: StyleProp<ViewStyle>;
    backgroundColor?: string
  };
  disabled?: boolean;
  value: boolean;
  onChange?: (value: boolean) => void;
  duration?: number
}
export class Switch extends React.Component<SwitchProps> { }


/**
* Checkbox
*/
export type CheckboxLabelPosition = 'left' | 'right';
interface CheckboxProps {
  title?: {
    text?: string;
    style?: StyleProp<ViewStyle>;
    position?: CheckboxLabelPosition;
    numberOfLines?: number;
    disableStyle?: StyleProp<ViewStyle>
  };
  checkIcon?: { uri?: string } | number | string
  disabled?: boolean;
  value: boolean;
  defaultValue?: boolean;
  canCheckChange?: boolean;
  fillParent?: boolean;
  onChange?: (value: boolean) => void;
  checkType?: string;
}
export class Checkbox extends React.Component<CheckboxProps> { }


/**
* AutoComplete
*/
interface AutoCompleteProps {
  data?: Array<object>;
  renderSuggestItem?: (item: object, index: number) => JSX.Element;
  onSelected?: (item: object) => void;
  style?: StyleProp<ViewStyle>
}
export class AutoComplete extends React.Component<AutoCompleteProps> { }

/**
 * MomoIcon
 * load png, svg, uri, svg uri,...
 */
interface IconProps {
  name?: object | number | string
}
export class Icon extends React.Component<IconProps> { }

/**
 * Coverflow
 */
export type Sensitivity = 'low' | 'normal' | 'high';
export type Deceleration = 0.99 | 0.994;

interface CoverFlowProps {
  sensitivity?: Sensitivity;
  deceleration?: Deceleration;
  initialSelection?: number;
  spacing?: number;
  wingSpan?: number;
  autoplayInterval?: number;
  rotation?: number;
  midRotation?: number;
  perspective?: number;
  scaleDown?: number;
  scaleFurther?: number;
  autoplay?: boolean;
  loop?: boolean;
  loopClonesPerSide?: number;
  contentStyle?: StyleProp<ViewStyle>;
  containerStyle?: StyleProp<ViewStyle>;
  onPress?: (value: number) => void;
  onChangePage?: (value: number) => void;
}
export class CoverFlow extends React.Component<CoverFlowProps> { }

/**
 * Pagination
 */
interface PaginationProps {
  activeDotIndex?: number;
  dotsLength?: number;
  activeOpacity?: number;
  carouselRef?: object;
  containerStyle?: StyleProp<ViewStyle>;
  dotColor?: string;
  dotContainerStyle?: StyleProp<ViewStyle>;
  dotElement?: any;
  dotStyle?: StyleProp<ViewStyle>;
  inactiveDotColor?: string;
  inactiveDotElement?: any;
  inactiveDotOpacity?: number;
  inactiveDotScale?: number;
  inactiveDotStyle?: StyleProp<ViewStyle>;
  renderDots?: () => JSX.Element;
  tappableDots?: boolean;
  vertical?: boolean;
  accessibilityLabel?: string
}
export class Pagination extends React.Component<PaginationProps> { }

/**
 * Carousel
 */
export type ActiveSlideAlignment = 'center' | 'end' | 'start';
export type Layout = 'default' | 'stack' | 'tinder';

interface CarouselProps<T = {}> {
  data: Array<T>;
  itemWidth?: number, // required for horizontal carousel
  itemHeight?: number, // required for vertical carousel
  sliderWidth?: number, // required for horizontal carousel
  sliderHeight?: number, // required for vertical carousel
  activeAnimationType?: string;
  activeAnimationOptions?: object;
  activeSlideAlignment?: ActiveSlideAlignment;
  activeSlideOffset?: number;
  apparitionDelay?: number;
  autoplay?: boolean;
  autoplayDelay?: number;
  autoplayInterval?: number;
  callbackOffsetMargin?: number;
  containerCustomStyle?: StyleProp<ViewStyle>;
  contentContainerCustomStyle?: StyleProp<ViewStyle>;
  enableMomentum?: boolean;
  enableSnap?: boolean;
  firstItem?: number;
  hasParallaxImages?: boolean;
  inactiveSlideOpacity?: number;
  inactiveSlideScale?: number;
  inactiveSlideShift?: number;
  layout?: Layout;
  layoutCardOffset?: number;
  lockScrollTimeoutDuration?: number;
  lockScrollWhileSnapping?: boolean;
  loop?: boolean;
  loopClonesPerSide?: number;
  scrollEnabled?: boolean;
  slideStyle?: StyleProp<ViewStyle>;
  shouldOptimizeUpdates?: boolean;
  swipeThreshold?: number;
  useScrollView?: boolean;
  vertical?: boolean;
  showsPagination?: boolean;
  renderItem: (info: { item: T, index: number }) => void;
  scrollInterpolator?: (index: number, props: Object) => void;
  slideInterpolatedStyle?: (index: number, animateValue: any, props: object) => void;
  onBeforeSnapToItem?: () => void;
  onSnapToItem?: () => void;
}
export class Carousel extends React.Component<CarouselProps> { }

/**
 * Skeleton
 */
export type SkeletonType = 'line' | 'media' | 'custom';

interface SkeletonProps {
  type?: SkeletonType;
  style?: StyleProp<ViewStyle>;
  size?: number;
  isRound?: boolean;
  duration?: number;
  right?: any;
  left?: any
}

export interface Skeleton extends SkeletonProps {
  Line?: React.ReactElement;
  Media?: React.ReactElement;
  Custom?: React.ReactElement;
}

interface InitRoute {
  title?: string;
  passProps?: object;
  screen?: any
}

interface NavigationProps {
  initRoute?: InitRoute
}

export class Navigation extends React.Component<NavigationProps> { }

/**
* @DataPickerCard
* Show icon automatic when has object.icon and don't @override @method renderContent
*
* @see DataPickerCardDemo.js expample
*/
interface DataPickerCardProps {
  disable?: boolean;
  selected?: boolean;
  hide?: boolean;
  renderContent?: Component;
  label?: string;
  labelStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
  onPress?: void;
  loading?: boolean;
  icon?: object | number | string;
  iconSelected?: object | number | string;
  iconStyle?: StyleProp<ImageStyle>
}
export class DataPickerCard extends React.Component<DataPickerCardProps> { }

/**
* @DataPicker
* @param dataSource: construct [{..., data: []},{...,data: []}];
* @param dataLoading: use to show status card loading if @param dataSource empty | null, contruct the same @see dataSource
* @callback onWillUpdateItem: @returns false if don't allow change status that item
* @param keyCompareItem: use to compare when have @param dataSelectedDefault
* @param groupStyle: style of grid container
* @param cardStyle: style of container item. @see DataPickerCard Component
* @param sectionLabelKey,@param sectionLabelStyle: case don't @override @method renderHeader, use to detect value is title, @default object.title
* @param labelKey, @param labelStyle: case don't @override @method renderItemContent, use to detect value is title, @default object.title
* @param dataSelectedDefault, @param keyCompareItem:
*        - component will mapp it and data source with @param keyCompareItem
* @param allSectionIsOnceSelect: when select a item will clear selected of section others automatic
*
* @see DataPickerDemo.js expample
*/
interface DataPickerProps<T = {}> {
  data: Array<T>;
  dataLoading: Array<any>;
  renderHeader?: (section: object, sectionIndex: number) => JSX.Element;
  renderItemContent?: (section: object, sectionIndex: number, item: object, itemIndex: number) => JSX.Element;
  onWillUpdateItem?: (section: object, sectionIndex: number, item: object, itemIndex: number) => boolean;
  onSelected?: (dataSelected: Array<T>) => void;
  groupStyle?: StyleProp<ViewStyle>;
  cardStyle?: StyleProp<ViewStyle>;
  sectionLabelKey?: string;
  sectionLabelStyle?: StyleProp<TextStyle>
  labelKey?: string;
  labelStyle?: StyleProp<TextStyle>;
  dataSelectedDefault?: Array<any>;
  keyCompareItem?: string;
  allSectionIsOnceSelect?: boolean;
  iconStyle?: StyleProp<ImageStyle>;
  isHorizontal?: boolean
}
export class DataPicker extends React.Component<DataPickerProps> {

  /**
   * data of this method will @callback @method onDataSelected(dataSelected: Array<any>)
   */
  static buildDataSelected(): void

  static clearSelected(): void

  static clearSelectedOfSectionIndex(sectionIndex: number): void

  static clearSelectedExceptSectionIndex(sectionIndex: number): void
}

/**
 * MomoText
 */
export type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'title' | 'subTitle' | 'caption';
export type Weight = 'bold' | 'normal' | 'medium' | 'regular';

interface MomoTextProps extends TextProps {
  font?: Object;
  variant?: Variant;
  weight?: Weight;
}

export class Text extends React.Component<MomoTextProps> {
  static H1: React.ComponentClass<MomoTextProps>
  static H2: React.ComponentClass<MomoTextProps>;
  static H3: React.ComponentClass<MomoTextProps>;
  static H4: React.ComponentClass<MomoTextProps>;
  static Title: React.ComponentClass<MomoTextProps>;
  static SubTitle: React.ComponentClass<MomoTextProps>;
  static Caption: React.ComponentClass<MomoTextProps>;
}

/**
 * HeaderScrollView extends ScrollView and FlatList
 */

export type ScrollViewHeaderContainerType = 'scrollView' | 'flatList';

interface ScrollViewHeaderProps extends FlatListProps<Object>, ScrollViewProps {
  headerComponent?: React.ComponentType<any> | React.ReactElement | null;
  type?: ScrollViewHeaderContainerType;
  duration?: number, // animation time
}

export class ScrollViewHeader extends React.Component<ScrollViewHeaderProps> { }

/**
 * ScrollableTabView
 */
export type TabBarPosition = 'top' | 'bottom' | 'overlayTop' | 'overlayBottom';

interface ScrollableTabViewProps {
  tabBarPosition?: TabBarPosition;
  initialPage?: number;
  page?: number;
  onChangeTab?: Function;
  onScroll?: Function;
  renderTabBar?: any;
  style?: StyleProp<ViewStyle>;
  contentProps?: Object;
  scrollWithoutAnimation?: boolean;
  locked?: boolean;
  prerenderingSiblingsNumber?: number;
  tabScrollable?: boolean;
  tabBarUnderlineColor?: string;
  tabBarBackgroundColor?: string;
  tabBarActiveTextColor?: string;
  tabBarInactiveTextColor?: string;
  tabBarTextStyle?: StyleProp<TextStyle>;
  activeTextStyle?: StyleProp<TextStyle>;
  iconSize?: 'small' | 'default';
  iconStyle?: StyleProp<ImageStyle>;
  isShowTab?: boolean;
}

export class ScrollableTabView extends React.Component<ScrollableTabViewProps> { }
interface SelectionItemListProps<T = {}> {
  data: Array<T>;
  itemProps?: SelectionItemProps;
  selectionIcon?: object | number;
  separateLine?: boolean;
  stickyHeader?: boolean;
  separateLineStyle?: StyleProp<ViewStyle>;
  renderHeaderItem?: JSX.Element;
  selectedItemStyle?: StyleProp<ViewStyle>;
  selectedItemTitleStyle?: StyleProp<TextStyle>;
  headerItemContainerStyle?: StyleProp<ViewStyle>;
  headerItemStyle?: StyleProp<TextStyle>;
  renderKey?: string;
  compareKey?: string;
  selectedItem?: Object | Array<Object>;
  listRef?: any;
  multiple?: boolean;
  uncheckable?: boolean;
  onItemPress?: (item: T, index: number, selectedIds: Array<number>) => void;
  onItemProps?: (item: T) => any
}

export class SelectionItemList extends React.Component<SelectionItemListProps> {
  setItemSelected(any: any); //object or id

  setItemSelectedIndex(index: number);

  clearItemSelected?: () => void;
}

interface BalanceProps {
  isShow?: boolean;
  style?: StyleProp<ViewStyle>;
  value?: number | string
}

export class Balance extends React.Component<BalanceProps> {
  static setBalance(value: string | number): void;
}

export type CircleProgressSize = 'small' | 'medium' | 'large' | 'giant'

export type CircularProgressUnit = 'number' | 'percent'

interface CircularProgressProps {
  backgroundColor?: string;
  fill?: number;
  rotation?: number;
  size?: CircleProgressSize, //default small
  style?: StyleProp<ViewStyle>;
  width?: number;
  min?: number, // default 0
  max?: number, // default 100
  percentFixed?: number;
  valueStyle?: StyleProp<TextStyle>;
  centerComponent?: JSX.Element;
  unit?: CircularProgressUnit,
  customSize?: number,
  offset?: number
}

export class CircularProgress extends React.Component<CircularProgressProps> { }

/**
 * CalendarPicker
 */
export type ModeCalender = 'signleDate' | 'doubleDate';

interface CalendarPickerProps {
  minDate?: Date;
  maxDate?: Date;
  mode?: ModeCalender;
  selectedDate?: Date;
  onDateChange?: Function;
}

export class CalendarPicker extends React.Component<CalendarPickerProps> { }

export type inputFormat = 'MM/YYYY' | 'dd/MM/YYYY'
interface DatePickerProps {
  selectedDate?: String;
  format?: inputFormat;
  minDate?: String;
  maxDate?: String;
  placeholder?: String;
  titleCancel?: String;
  titleConfirm?: String;
  labelMonth?: String;
  onSelected: Function,
  style?: any,
  onCreateRef(ref: any): void
}

export class DatePicker extends React.Component<DatePickerProps> { }

interface CircularProgressAnimatedProps extends CircularProgressProps {
  duration?: number, // default 500 milliseconds
  startAfterMilliseconds?: number // animation will be fired after amount millisecond, default 500
  animationEnd?: () => void;
}

export class CircularProgressAnimated extends React.Component<CircularProgressAnimatedProps> { }

interface SwipeActionProps extends React.PropsWithChildren<{
  closeOnPress?: boolean;
  disableRightAction?: boolean;
  disableLeftAction?: boolean;
  hiddenRowBackground?: string
  style?: StyleProp<ViewStyle>;
  leftData?: Array<any> | React.ReactElement | Function;
  rightData?: Array<any> | React.ReactElement | Function;
  onPress?: () => void;
  onOpen?: () => void;
  onDidOpen?: () => void;
  onClose?: () => void;
  onDidClose?: () => void;
  leftAction?: any;
  rightAction?: any;
  renderRightAction?: () => void;
  renderLeftAction?: () => void;
  onPress?: () => void;
  actionBackground?: string;
  actionTextStyle?: object | [];
}> { }

export class SwipeAction extends React.Component<SwipeActionProps> { }
interface BankListHeaderProps {
  hideQuestionIcon?: boolean;
  label?: string;
  onHeaderPress?: () => void;
  style?: StyleProp<ViewStyle>;
  subTitle?: string;
  title?: string
}

export class BankListHeader extends React.Component<BankListHeaderProps> { }

interface BankItem {
  name?: string;
  icon?: number | string | object
}


interface BankListProps extends FlatListProps<BankItem>, BankListHeaderProps {
  data: Array<BankItem>;
  numColumns?: number, // num column of list
  title?: string, // title of header
  subTitle?: string, // sub title of header
  label?: string, // label of header
  style?: StyleProp<ViewStyle>;
  disabled?: boolean;
  itemProps?: IconTextProps;
  hideHeader?: boolean;
  displayAll?: boolean;
  canExpandWhenDisable?: boolean;
  forceShowExpandButton?: boolean;
  minimumRow?: number
  onPress?: (data: BankItem) => void;
  onHeaderPress?: () => void;
  renderCustomHeader?: () => any;
}

export class BankList extends React.Component<BankListProps> { }
interface CardViewProps {
  style?: StyleProp<ViewStyle>;
  innerStyle?: StyleProp<ViewStyle>;
  leftLineStyle: StyleProp<ViewStyle>;
  onPress?: () => void;
  children?: React.ReactNode;
  showLeftLine?: boolean;
  hideShadow?: boolean;
}

export class CardView extends React.Component<CardViewProps> { }
interface ToastProps {
  onClose?: () => void;
  style?: StyleProp<ViewStyle>;
  iconStyle?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  descriptionStyle?: StyleProp<TextStyle>;
}
export class Toast extends React.Component<ToastProps> {
  static LENGTH_SHORT; //
  static LENGTH_LONG;
}

interface LineProps {
  style?: StyleProp<ViewStyle>;
  type?: 'horizontalLine' | 'verticalLine' | 'horizontalDashed' | 'verticalDashed';
  length?: number | string;
  thickness?: number;
  color?: string | Object;
  dashLength?: number;
  dashGap?: number
}

export class Line extends React.Component<LineProps> { }
interface FlexProps {
  style?: Object | Array<Object>;
  childrenStyle?: StyleProp<ViewStyle>;
  type?: string;
  scrollable?: boolean;
  keyboardVerticalOffset?: Number,
  keyboardAvoidView?: Boolean
}

export class Flex extends React.Component<FlexProps> { }

export class CameraKitCamera extends React.Component<{}> { }
interface BankFeeItem {
  left?: string;
  right?: string;
  title?: string;
  value?: string;
  leftStyle?: StyleProp<TextStyle>;
  rightStyle?: StyleProp<TextStyle>;
  disableCheck?: boolean;
  disableCheckChange?: boolean,
  leftIcon: ImageSourcePropType,
  rightIcon: ImageSourcePropType,
  leftIconColor: String,
  rightIconColor: String,
  onRightPress(): void
}

interface BankFeeProps<T = {}> {
  leftStyle?: StyleProp<TextStyle>;
  rightStyle?: StyleProp<TextStyle>;
  rightContainerStyle?: StyleProp<ViewStyle>;
  leftContainerStyle?: StyleProp<ViewStyle>;
  itemContainerStyle?: StyleProp<ViewStyle>;
  listProps?: FlatListProps<T>;
  data?: Array<BankFeeItem>;
  style?: StyleProp<ViewStyle>;
  title?: String;
  headerComponent?: any;
  leftCheck?: Boolean;
  disableMap?: Object;
  disableStyle?: StyleProp<TextStyle>;
  showInputOnCheck?: Boolean;
  inputProps?: UnderlineTextInputProps;
  maxValue?: Number;
  inputEmptyError: String,
  inputOverMaxValueError?: String;
  inputInvalidError?: String;
  minValue?: Number;
  inputLowerMinValueError?: String;
  inputOverAmountError?: String;
  initialCheck?: Object;
  nestedFeeCheck?: Boolean;
  initDisableMap?: Object
  rightIconStyle?: StyleProp<ViewStyle>;
  autoAlignItem?: Boolean;
  maxAlignRate?: Number;
  headerContainerStyle?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  checkType?: 'checkbox' | 'radio';
  onRightIconPress?: (item: BankFeeItem) => void;
  onLeftIconPress?: (item: BankFeeItem) => void
  onChangeText?: (value: String, index?: Number, valueMap?: any) => void;
  onCheckChange?: (value: String, index?: Number, valueMap?: any) => void  // map = {index1: item1, index2: item2}
}

export class BankFee extends React.Component<BankFeeProps> {
  static setDisableMap(disableMap): void
  static clearCheck(): void
}

export class Colors {
  static light_black; // '#222222'
  static white; // '#ffffff';
  static default;
  static error;
  static warning;
  static success;
  static primary;
  static error_second;
  static warning_second;
  static success_second;
  static primary_second;
  static disabled_lv1;
  static disabled_lv2;
  static link; // '#188aeb'
  static placeholder; // '#ced0d4'
  static hint; // '#8d919d'
  static disabled; // '#bec4cf'
  static danger; // '#e82956'
  static very_light_pink; // '#f0f0f0'
  static borders; // '#c7c7cd'
  static white_two; // '#f4f4f4'
  static pale_mauve; /// '#f5ecf2'
  static very_light_pink_two; // '#eeeeee'
  static very_light_pink_three; // '#e9e9e9'
  static very_light_pink_four; // '#d3d3d3'
  static very_light_pink_five; // '#bdbdbd'
  static brown_grey; // '#a8a8a8'
  static brown_grey_two; //'#929292'
  static brown_grey_three; // '#7c7c7c'
  static brownish_grey; //  '#666666'
  static greyish_brown; // '#515151'
  static black; // '#000000'
  static black_two; // '#252525'
  static red_pink; // '#ea3e66'
  static warm_pink; // '#ed5478'
  static rosy_pink; // '#ee6988'
  static carnation; // '#f17f9a'
  static pinky; // '#f394aa'
  static soft_pink; // '#f6a9bb'
  static pastel_pink; // '#f8becc'
  static pale_pink;// '#fad4dd'
  static light_pink;//'#fce9ee'
  static light_pink_two;// '#feeef2'
  static light_pink_three;// '#fef4f6'
  static light_blue_grey;// '#c4c9d3'
  static light_blue_grey_two;// '#cbd0d9'
  static light_blue_grey_three;// '#d1d5dd'
  static light_periwinkle;// '#d8dce2'
  static light_periwinkle_two;//'#dee1e7'
  static very_light_blue;// '#e5e7ec'
  static very_light_blue_two; // '#ebedf0'
  static pale_grey; // '#f2f3f5'
  static pale_grey_two; // '#f8f9fa'
  static pale_grey_three; // '#fafbfc'
  static white_three; // '#fcfcfc'
  static bluey_grey_70; // '#989ca6'
  static bluey_grey; // '#a4a7b1'
  static light_grey_blue; // '#afb2ba'
  static cloudy_blue; // '#bbbdc4'
  static light_blue_grey_four; // '#c6c8ce'
  static light_blue_grey_five; // '#d1d3d8'
  static light_periwinkle_three; // '#dcdee1'
  static very_light_blue_three; // '#e8e9eb'
  static pale_grey_four; // '#f3f4f5'
  static pale_grey_five; // '#f6f7f8'
  static pale_grey_six; // '#f9f9fa'
  static dark_sky_blue; // '#2f95ed'
  static dark_sky_blue_two; // '#46 a1ef'
  static soft_blue; // '#5dadf1'
  static sky_blue; // '#74b9f3'
  static sky; // '#8bc4f5'
  static baby_blue; // '#a3d0f7'
  static powder_blue; // '#b9dbf9'
  static pale_blue; // '#d1e8fb'
  static ice_blue; // '#e7f3fd'
  static pale_grey_seven; // '#edf6fe'
  static pale_grey_eight; // '#f3f9fe'
  static lipstick; //'#b7197b'
  static warm_purple; // '#c0338a'
  static darkish_pink; // '#c74c98'
  static pale_magenta; // '#d066a7'
  static dull_pink; // '#d77fb6'
  static faded_pink; // '#df99c5'
  static powder_pink; // '#e7b2d3'
  static pastel_pink_two; // '#efcce2'
  static light_pink_four; // '#f7e5f0'
  static pale_mauve_two; // '#f9ebf4'
  static light_pink_five; // '#fbf2f7'
  static kiwi_green; // '#85cf46'
  static kiwi; // '#93d55b'
  static pale_olive_green; // '#a0d96f'
  static spring_green; // '#aedf84'
  static light_grey_green; // '#bbe498'
  static light_sage; // '#c9eaad'
  static very_pale_green; // '#d6efc1'
  static very_light_green; // '#e4f4d6'
  static off_white; // '#f1f9ea'
  static off_white_two; // '#f5fbef'
  static off_white_three; // '#f8fcf5'
  static mango; //'#fa922a'
  static faded_orange; // '#fb9e42'
  static pale_orange; // '#fbaa59'
  static apricot; // '#fcb671'
  static peach; // '#fcc289'
  static light_peach; // '#fdcfa1'
  static light_peach_two; // '#fddab8'
  static pale; // '#fee7d0'
  static very_light_pink_six; // '#fef2e7'
  static very_light_pink_seven; // '#fff6ed'
  static very_light_pink_eight; // '#fff9f3'
  static text_color_header; // '#222222';
  static text_color; // '#4D4D4D';
  static second_text_color; // '#8F8E94';
  static third_text_color; // '#C8C7CC';
  static text_color_link; // '#77ade6'
  static border_light; // '#dadada';
  static background_gray; // '#edeeee'

  /**
   * film
   */
  static min_years_old_c_18; //'#ce393e'
  static min_years_old_p; //'#589916'
  static min_years_old_under_18; //'#f5a623'
  static filmTime; //'#ffb259'

  // switch
  static switch_active_color; //'#b7de21'
  static switch_inactive_color; //'#9a9a9a'
  static navbar_cyan; //'#325340'
  static border_color_gray; //'#DADADA'
  static light_green; // '#6dd400';
  static boulder_grey; // '#757575';
  static manatee_grey; // '#9599A2';


  /**
   * from color core
   */

  static green_01; //'#092b00'

  static green_03; //'#237804'

  static green_05; //'#52c41a'

  static green_07; //'#95de64'

  static green_09; //'#d9f7be'

  static green_02; //'#135200'

  static green_04; //'#389e0d'

  static green_06; //'#73d13d'

  static green_08; //'#b7eb8f'

  static green_10; //'#f6ffed'

  static orange_01; //'#612500'

  static orange_03; //'#ad4e00'

  static orange_05; //'#fa8c16'

  static orange_07; //'#ffc069'

  static orange_09; //'#ffe7ba'

  static orange_02; //'#873800'

  static orange_04; //'#d46b08'

  static orange_06; //'#ffa940'

  static orange_08; //'#ffd591'

  static orange_10; //'#fff7e6'

  static pink_01; //'#520339'

  static pink_03; //'#a50064'

  static pink_05; //'#eb2f96'

  static pink_05_b; //'#d82d8b'

  static pink_07; //'#ff85c0'

  static pink_09; //'#ffd6e7'

  static pink_02; //'#780650'

  static pink_04; //'#c1177c'

  static pink_06; //'#f759ab'

  static pink_08; //'#ffadd2'

  static pink_10; //'#fff0f6'

  static red_01; //'#5c0011'

  static red_03; //'#a8071a'

  static red_05; //'#f5222d'

  static red_07; //'#ff7875'

  static red_09; //'#ffccc7'

  static red_02; //'#820014'

  static red_04; //'#cf1322'

  static red_06; //'#ff4d4f'

  static red_08; //'#ffa39e'

  static red_10; //'#fff1f0'

  static cyan_01; //'#002329'

  static cyan_03; //'#006d75'

  static cyan_05; //'#13c2c2'

  static cyan_07; //'#5cdbd3'

  static cyan_09; //'#b5f5ec'

  static cyan_02; //'#00474f'

  static cyan_04; //'#08979c'

  static cyan_06; //'#36cfc9'

  static cyan_08; //'#87e8de'

  static cyan_10; //'#e6fffb'

  static violet_01; //'#120338'

  static violet_03; //'#391085'

  static violet_05; //'#722ed1'

  static violet_07; //'#b37feb'

  static violet_09; //'#efdbff'

  static violet_02; //'#22075e'

  static violet_04; //'#531dab'

  static violet_06; //'#9254de'

  static violet_08; //'#d3adf7'

  static violet_10; //'#f9f0ff'

  static indigo_01; //'#030852'

  static indigo_03; //'#10239e'

  static indigo_05; //'#2f54eb'

  static indigo_07; //'#85a5ff'

  static indigo_09; //'#d6e4ff'

  static indigo_02; //'#061178'

  static indigo_04; //'#1d39c4'

  static indigo_06; //'#597ef7'

  static indigo_08; //'#adc6ff'

  static indigo_10; //'#f0f5ff'

  static lime_01; //'#254000'

  static lime_03; //'#5b8c00'

  static lime_05; //'#a0d911'

  static lime_07; //'#d3f261'

  static lime_09; //'#f4ffb8'

  static lime_02; //'#3f6600'

  static lime_04; //'#7cb305'

  static lime_06; //'#bae637'

  static lime_08; //'#eaff8f'

  static lime_10; //'#fcffe6'

  static sepia_01; //'#610b00'

  static sepia_03; //'#ad2102'

  static sepia_05; //'#fa541c'

  static sepia_07; //'#ff9c6e'

  static sepia_09; //'#ffd8bf'

  static sepia_02; //'#871400'

  static sepia_04; //'#d4380d'

  static sepia_06; //'#ff7a45'

  static sepia_08; //'#ffbb96'

  static sepia_10; //'#fff2e8'

  static blue_01; //'#002766'

  static blue_03; //'#0050b3'

  static blue_05; //'#1890ff'

  static blue_07; //'#69c0ff'

  static blue_09; //'#bae7ff'

  static blue_02; //'#003a8c'

  static blue_04; //'#096dd9'

  static blue_06; //'#40a9ff'

  static blue_08; //'#91d5ff'

  static blue_10; //'#e6f7ff'

  static gold_01; //'#613400'

  static gold_03; //'#ad6800'

  static gold_05; //'#faad14'

  static gold_07; //'#ffd666'

  static gold_09; //'#fff1b8'

  static gold_02; //'#874d00'

  static gold_04; //'#d48806'

  static gold_06; //'#ffc53d'

  static gold_08; //'#ffe58f'

  static gold_10; //'#fffbe6'

  static black_01; //'#ffffff'

  static black_02; //'#f9f9f9'

  static black_03; //'#f0f0f0'

  static black_04; //'#e8e8e8';

  static black_05; //'#e5e5e5';

  static black_06; //'#d8d8d8';

  static black_07; //'#cccccc';

  static black_08; //'#c6c6c6';

  static black_09; //'#b9b9b9';

  static black_10; //'#a0a0a0'

  static black_11; //'#878787';

  static black_12; //'#727272';

  static black_13; //'#646464';

  static black_14; //'#565656';

  static black_15; //'#484848';

  static black_16; //'#404040';

  static black_17; //'#303233';

  static black_18; //'#242424';

  static black_19; //'#18191a';

  static black_20; //'#000000';

  static grey_fund; //'#797c80';

  static grey_fund_1; //'#d9d9d9';

  static grey_fund_2; //'#a9adb3';

  static grey_fund_3; //'#fafafa';

  static back_fund_30; //'#00000030';

  static back_fund_75; //'#00000075';

  static blue_fund; //'#007bff';

  static blue_fund_1; //'#3679e4';

  static blue_fund_2; //'#364be4';

  static orange_fund; //'#ffd89a';

  static green_fund; //'#6dda00';

  static red_fund; //'#e43636';

  static solid_black_bl_1; //'#ebebeb';

  static solid_black_bl_2; //'#f7f7f7';

  static blue_grey; //'#1c7ed6';

  static transparent; //'transparent';

  static green_11; //'#fafff6';
  static pink_11; //'#fff7fa';
  static red_11; //'#fff8f7';
  static cyan_11; //'#f1fffd';
  static violet_11; //'#fcf7ff';
  static indigo_11; //'#f6faff';
  static lime_11; //'#fcfff2';
  static sepia_11; //'#fff8f3';
  static blue_11; //'#f2fbff';
  static gold_11; //'#fffdf2';
  static white_opacity; //rgba(255, 255, 255, 0)
}

export type LineType = 'dash';


interface StepGuideItemDataProps {
  source: { uri: string } | number;
  title?: string;
  contents?: Array<string>
}

interface StepGuideItemProps extends StepGuideItemDataProps {
  contentStyle?: StyleProp<ViewStyle>;
  iconStyle?: StyleProp<ImageStyle>;
  titleStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
  lineProps?: LineProps;
  seperateLine: Boolean
  subTitleStyle?: StyleProp<TextStyle>;
  lineType?: string;
  lineProps?: object;
  activeIndex?: number;
  useNativeImage?: boolean;
}

interface VerticalStepGuideProps extends Partial<FlatListProps<StepGuideItemDataProps>> {
  data: Array<StepGuideItemDataProps>;
  itemProps?: StepGuideItemProps;
  lineType?: String;
  containerStyle?: StyleProp<ViewStyle>,
  type: 'number' | 'default',
  activeIndex: number,
  onLinkPress(content, index): void
  showsVerticalScrollIndicator?: boolean;
  scrollEnabled?: boolean;
  lineProps?: object;
}

export class VerticalStepGuide extends React.Component<VerticalStepGuideProps> { }

interface HTMLViewProps {
  addLineBreaks?: boolean;
  bullet?: string;
  lineBreak?: string;
  paragraphBreak?: string;
  value?: string;
  rootComponentProps?: Object;
  textComponentProps?: Object;
  nodeComponentProps?: Object;
  useCustomHtmlView?: boolean;
  customHtmlViewProps?: Object;
  styleSheet?: Object;
  style?: StyleProp<ViewStyle>;
  NodeComponent?: JSX.Element;
  TextComponent?: JSX.Element;
  RootComponent?: JSX.Element;
  renderNode?: (node: Object) => JSX.Element;
  onError?: (e: Error) => void;
  onLinkPress?: () => void;
  onLinkLongPress?: () => void;
}

export class HTMLView extends React.Component<HTMLViewProps> { }

/**
 * modal
 */

export type SwipeDirection = 'up' | 'down' | 'left' | 'right'

export type DragEvent = {
  axis?: {
    x: number;
    y: number;
  };
  layout?: {
    x: number;
    y: number;
    width: number;
    height: number;
  };
  swipeDirection?: SwipeDirection
}

export type ModalProps = React.PropsWithChildren<{
  visible: boolean;
  width?: number;
  height?: number;
  rounded?: boolean;
  hasOverlay?: boolean;
  overlayPointerEvents?: 'auto' | 'none';
  overlayBackgroundColor?: string;
  overlayOpacity?: number;
  modalTitle?: React.ReactElement;
  modalAnimation?: Object;
  modalStyle?: any;
  style?: any;
  animationDuration?: number;
  footer?: Node;
  swipeDirection?: SwipeDirection | Array<SwipeDirection>;
  swipeThreshold?: number;
  useNativeDriver?: boolean;
  dragDisabled?: boolean;
  onTouchOutside?: () => void;
  onHardwareBackPress?: () => boolean;
  onShow?: () => void;
  onDismiss?: () => void;
  onMove?: (event: DragEvent) => void;
  onSwiping?: (event: DragEvent) => void;
  onSwipeRelease?: (event: DragEvent) => void;
  onSwipingOut?: (event: DragEvent) => void;
  onSwipeOut?: (event: DragEvent) => void;
}>

export type ModalFooterActionList = Array<Element>;

export type modalFooterProps = {
  children: ModalFooterActionList;
  style?: any;
  bordered?: boolean;
}

export type ModalButtonProps = {
  text: string;
  align?: string;
  style?: any;
  textStyle?: any;
  disabled?: boolean;
  activeOpacity?: number;
  bordered?: boolean;
  onPress: () => void;
}

export type ModalTitleProps = {
  title: any;
  style?: any;
  textStyle?: any;
  align?: string;
  hasTitleBar?: boolean;
}

export type ModalContentProps = React.PropsWithChildren<{
  style?: StyleProp<ViewStyle>;
}>

export type BackdropProps = {
  visible?: boolean;
  opacity?: number;
  backgroundColor?: string;
  animationDuration?: number;
  pointerEvents?: string;
  useNativeDriver?: boolean;
  onPress?: () => void;
}

//export class BankFee extends React.Component<BankFeeProps> { }

interface SwipeActionListProps<T = {}> {
  contentData?: Array<T>;
  rowView?: JSX.Element;
  lineView?: JSX.Element;
  leftHiddenData?: Array<T>;
  rightHiddenData?: Array<T>;
  actionTextStyle?: Object;
  actionIconStyle?: Object;
  closeOnScroll?: boolean;
  closeOnPress?: boolean;
  disableRightAction?: boolean;
  disableLeftAction?: boolean;
  hiddenRowBackground?: string
  onOpen?: () => void;
  onClose?: () => void;
  onPress?: () => void;
}

export class SwipeActionList extends React.Component<SwipeActionListProps> { }
interface BottomSelectionItemProps extends Object {
  title?: string;
  uri?: string | object | number;
  description?: string
}

interface BottomSelectionListProps extends Partial<SelectionItemListProps> {
  data: Array<BottomSelectionItemProps>;
  title: String;
  body?: String;
  itemProps?: SelectionItemProps;
  selectedIndex?: Number;
  selectedItemStyle?: StyleProp<ViewStyle>;
  selectedItemTitleStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
  headerStyle?: StyleProp<ViewStyle>;
  buttonTitle?: String;
  closeOnItemPress?: Boolean;
  rightButtonTitle: String;
  rightButtonStyle: StyleProp<ViewStyle>;
  rightTitleStyle: StyleProp<TextStyle>;
  delay: Number;
  closeTextStyle: StyleProp<TextStyle>;
  onRightButtonPress?: () => void;
  onClose?: () => void;
  onButtonPress?: () => void;
  onItemPress?: (item: BottomSelectionItemProps, index: Number, selectedIndecies: Array<Number>) => void;
}

export class BottomSelectionList extends React.Component<BottomSelectionListProps>{ }

interface FilmInfoProps {
  button?: string;
  date?: string;
  body?: string;
  light?: boolean;
  minYearsOld?: string;
  title?: string;
  source?: ImageSourcePropType;
  style?: StyleProp<ViewStyle>;
  flashIcon?: ImageSourcePropType;
  onPress?: () => void;
}

export class FilmInfo extends React.Component<FilmInfoProps> { }
interface KeyboardPopupProps {
  bottomMessage?: string;
  centerMessage?: string;
  maxLength?: number;
  secureTextEntry?: boolean;
  separateTextUnderline?: boolean;
  title?: string;
  bottomMessageStyle?: StyleProp<TextStyle>;
  centerMessageStyle?: StyleProp<TextStyle>;
  onBottomMessagePress?: () => void;
  /**
   * errorCallback(errorMessage) => display errorMessage in centerMessage
   * errorCallback(false) => close keyboard
   */
  onChangeValue?: (value: string, errorCallback?: () => void) => void; // errorCallBack
  onClose?: () => void;
}

export class KeyboardPopup extends React.Component<KeyboardPopupProps> { }

interface ActionPopupButtonItems {
  title?: string;
  subTitle?: string;
  onPress?: () => void;
}

interface ActionPopupProps {
  buttons?: Array<ActionPopupButtonItems>;
  title?: string;
  titleContainerStyle?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  titleUnderLineStyle?: StyleProp<ViewStyle>;
  onClose?: () => void;
}

export class ActionPopup extends React.Component<ActionPopupProps> { }

interface AlertButtonItems {
  title?: string;
  onPress?: () => void;
}

interface AlertContentProps {
  bodyStyle?: StyleProp<TextStyle>;
  titleStyle?: StyleProp<TextStyle>;
}

interface AlertPopupProps {
  body?: string;
  title?: string;
  renderBody?: () => JSX.Element;
  contentStyle?: AlertContentProps;
  headerWrapperStyle?: StyleProp<ViewStyle>;
  header?: ImageSourcePropType;
  headerStyle?: StyleProp<ImageStyle>;
  headerResizeMode?: string;
  buttons?: Array<AlertButtonItems>;
  buttonsDirection?: string;
  onRef?: (ref: React.RefObject<any> | React.MutableRefObject<any>) => void
  requestClose?: () => void;
  isLottie?: boolean;
  lottieProps?: object;
}

export class AlertPopup extends React.Component<AlertPopupProps> { }

interface LoadingPopupProps {
  title?: any, //can be pass component
  subTitle?: any, //can be pass component
  icon?: any;
  showDone?: boolean;
  timeout?: number;
  size?: number;
  color?: string
}

export class LoadingPopup extends React.Component<LoadingPopupProps> { }

interface VoucherCardData {
  icon?: String;
  name?: String;
  desc?: String;
  endDate?: Number;
  title?: String;
  subTitle?: String;
  typeDefine?: String, // arrConditionVoucher or null
  quantity?: Number;
  startDate?: Number;
}

interface VoucherCardProps {
  data: VoucherCardData;
  buttonTitle?: String;
  dotColor?: String;
  disabled: Boolean,
  renderCustomButton?: () => JSX.Element;
  onMounted?: (typeId: Number) => void, // type of voucher, track voucher display after mounted;
  onPress?: () => void;
  onButtonPress?: () => void, // press on button use
  isShowTag?: boolean;
  isSelected?: boolean;
  iconTag?: string;
  tagStyle?: StyleProp<ViewStyle>;
}

export class VoucherCard extends React.Component<VoucherCardProps>  { }
interface FilmTimeListProps {
  data: Array<string>;
  leftIcon?: ImageSourcePropType
  numColumns: Number,
  onTimePress?: (item: string, index: number) => void;
  style?: StyleProp<ViewStyle>
}

export class FilmTimeList extends React.Component<FilmTimeListProps>{ }


type HorizontalPageGuideType = 'top' | 'bottom';

interface HorizontalPageGuideItem {
  title?: string;
  description?: string;
  source?: ImageSourcePropType;
  customComponent: JSX.Element
  position?: HorizontalPageGuideType;
  renderContent?: JSX.Element // The highest priority for render page content
}

interface HorizontalPageGuideProps {
  data: Array<HorizontalPageGuideItem>;
  backButton?: string;
  bodyStyle?: StyleProp<TextStyle>;
  imageContainerStyle?: StyleProp<ViewStyle>;
  imageStyle?: StyleProp<ImageStyle>;
  nextButton?: string;
  tripEndButton?: string;
  titleStyle?: StyleProp<TextStyle>;
  replacePaginationOnTripEnd?: JSX.Element
  onTripEndButtonPress?: () => void;
  onIndexChanged?: (position: number) => void;
}

export class HorizontalPageGuide extends React.Component<HorizontalPageGuideProps> { }
interface SliderProps {
  values: Array<number>;
  style?: StyleProp<ViewStyle>;
  selectedStyle?: StyleProp<ViewStyle>;
  unselectedStyle?: StyleProp<ViewStyle>;
  isMarkerSeparated?: boolean;
  enabledOne?: boolean;
  enabledTwo?: boolean;
  step?: number;
  min?: number;
  max?: number;
  allowRange: Array<Number>,
  customMarker?: () => void;
  customMarkerLeft?: () => void;
  customMarkerRight?: () => void;
  onChangeStart?: () => void;
  onChange?: () => void;
  onChangeFinish?: () => void;
  onMarkersPosition?: () => void;
  markerOffsetX?: number;
  markerOffsetY?: number;
  isMarkersSeparated?: boolean;
  touchDimensions?: object;
  containerStyle?: StyleProp<ViewStyle>;
  vertical?: boolean;
  trackStyle?: StyleProp<ViewStyle>;
  markerContainerStyle?: StyleProp<ViewStyle>;
  customLabel?: any;
  onToggleOne?: () => void;
  onToggleTwo?: () => void;
  allowOverlap?: boolean;
  snapped?: boolean;
  minMarkerOverlapDistance?: number;
  length?: number;
}

export class Slider extends React.Component<SliderProps>{ }

interface QuantityProps {
  style?: StyleProp<ViewStyle>;
  min?: number;
  max?: number;
  value?: number;
  onChange?: Function;
  isChangeValue?: boolean;
  onConditionCheck?: (quantity) => boolean;
  type?: 'large' | 'medium' | 'small';
  valueStyle?: StyleProp<ViewStyle>;
  defaultValue?: number,
  isIncreaseValue?: boolean;
  isDecreaseValue?: boolean;
  isSingle?: boolean;
  tintColor?: string;
  iconStyle?: StyleProp<ViewStyle>;
}

export class Quantity extends React.Component<QuantityProps>{ }
interface BottomPopupHeaderProps {
  buttonTitle?: string;
  title: string;
  style?: StyleProp<ViewStyle>;
  iconClosePosition?: 'left' | 'right',  // default left;
  iconType?: 'icon' | 'text', // default icon;
  body?: string;
  buttonStyle?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  rightButtonTitle: String;
  rightButtonStyle: StyleProp<ViewStyle>;
  rightTitleStyle: StyleProp<TextStyle>;
  onRightButtonPress?: () => void;
  onButtonPress?: () => void;
  onClose?: () => void;
}

export class BottomPopupHeader extends React.Component<BottomPopupHeaderProps> { }
interface DiscountVoucherCardItem {
  name?: string;
  body?: string;
  endDate?: number;
  icon?: string;
  selected?: boolean
}

interface DiscountVoucherCardProps {
  item?: DiscountVoucherCardItem;
  style?: StyleProp<ViewStyle>
  onPress?: (item: DiscountVoucherCardItem) => void;
}

export class DiscountVoucherCard extends React.Component<DiscountVoucherCardProps> { }
interface GreetingCardProps {
  body?: string;
  checkable?: boolean;
  checked?: boolean;
  source?: string | number | { uri: string };
  style?: StyleProp<ViewStyle>;
  title?: string;
  onPress?: () => void;
  checkIcon: string | number | { uri: string };
  checkIconStyle?: StyleProp<ViewStyle>;
  checkStyle?: StyleProp<ViewStyle>;
  animated?: boolean;
  hasImageBorder?: boolean;
}

export class GreetingCard extends React.Component<GreetingCardProps> { }

interface PopoverViewProps {
  isVisible: boolean;
  mode?: "modal" | "view";
  fromView?: Component<any> | null;
  fromRect?: { x: number, y: number, width: number, height: number };
  displayArea?: { x: number, y: number, width: number, height: number };
  placement?: "top" | "bottom" | "left" | "right" | "auto";
  animationConfig?: Animated.TimingAnimationConfig;
  verticalOffset?: number;
  popoverStyle?: StyleProp<ViewStyle>;
  arrowStyle?: StyleProp<ViewStyle>;
  backgroundStyle?: StyleProp<ViewStyle>;
  fromDynamicRect?: (
    displayAreaWidth: number,
    displayAreaHeight: number
  ) => { x: number, y: number, width: number, height: number };
  onOpenStart?: () => void;
  onOpenComplete?: () => void;
  onRequestClose?: () => void;
  onCloseStart?: () => void;
  onCloseComplete?: () => void;
}
export class Popover extends Component<PopoverViewProps> { }

export class ScreenUtils {
  static isIphoneX(): boolean;

  static ifIphoneX(a, b): number // return value a if device is iphone x, iphone xr ..., b or not

  static getPaddingBottomIphoneX(): number
}

//Document for Image cache
declare type Priority = 'low' | 'normal' | 'high';
declare const priority: {
  readonly low: "low";
  readonly normal: "normal";
  readonly high: "high";
};
declare type Cache = 'immutable' | 'normal' | 'cacheOnly';
declare type Resize = 'contain' | 'cover' | 'stretch' | 'center';

declare const cacheControl: {
  readonly immutable: "immutable";
  readonly web: "web";
  readonly cacheOnly: "cacheOnly";
};
export declare type Source = {
  uri?: string;
  headers?: {
    [key: string]: string;
  };
  priority?: Priority;
  cache?: Cache;
  timeCache?: number;
};
export interface OnLoadEvent {
  nativeEvent: {
    width: number;
    height: number;
  };
}
export interface OnProgressEvent {
  nativeEvent: {
    loaded: number;
    total: number;
  };
}
export interface CustomImageStyle extends FlexStyle, TransformsStyle, ShadowStyleIOS {
  backfaceVisibility?: 'visible' | 'hidden';
  borderBottomLeftRadius?: number;
  borderBottomRightRadius?: number;
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: number;
  borderRadius?: number;
  borderTopLeftRadius?: number;
  borderTopRightRadius?: number;
  overlayColor?: string;
  tintColor?: string;
  opacity?: number;
}
export interface FastImageProps {
  source: Source | number;
  resizeMode?: Resize;
  cached?: boolean;
  style?: StyleProp<ImageStyle>;
  tintColor?: number | string;
  testID?: string;
  children?: React.ReactNode;
  onLoadStart?: () => void;
  onProgress?(event: OnProgressEvent): void;
  onLoad?(event: OnLoadEvent): void;
  onError?: () => void;
  onLoadEnd?: () => void;
  onLayout?: (event: LayoutChangeEvent) => void;
}

// declare const Image: React.ComponentType<FastImageProps>;
// export default Image;

interface AnimationObject {
  v: string;
  fr: number;
  ip: number;
  op: number;
  w: number;
  h: number;
  nm: string;
  ddd: number;
  assets: any[];
  layers: any[];
}

type ColorFilter = {
  keypath: string;
  color: string;
}

interface AnimatedLottieViewProps {
  source: string | AnimationObject | { uri: string };
  progress?: number | Animated.Value;
  speed?: number;
  duration?: number;
  loop?: boolean;
  style?: StyleProp<ViewStyle>;
  imageAssetsFolder?: string;
  hardwareAccelerationAndroid?: boolean;
  resizeMode?: "cover" | "contain" | "center";
  cacheStrategy?: 'strong' | 'weak' | 'none';
  autoPlay?: boolean;
  autoSize?: boolean;
  enableMergePathsAndroidForKitKatAndAbove?: boolean;
  colorFilters?: Array<ColorFilter>;
  onAnimationFinish?: (isCancelled?: boolean) => void;
  isLowPerformance?: boolean
  defaultSource?: any;
  webMode?: boolean;
}
export class LottieView extends React.Component<AnimatedLottieViewProps, {}> {
  play?: (startFrame?: number, endFrame?: number) => void;
  reset?: () => void;
}
interface ExpandableViewProps {
  itemKey?: string;
  subItemKey?: string;
  closeOnSubPress?: boolean;
  itemActiveOpacity?: number;
  subActiveOpacity?: number;
  onPress?: () => void;
  onSubPress?: () => void;
  data?: object;
  ItemSeparatorComponent?: React.ReactElement | Function
}

export class ExpandableView extends Component<ExpandableViewProps> { }

interface ExpandableListProps<T = {}> {
  data: Array<T>;
  itemKey?: string;
  subItemKey?: string;
  renderSubItem?: React.ReactElement | Function;
  renderExpandableItem?: React.ReactElement | Function;
  singleMode?: boolean;
  closeOnSubPress?: boolean;
  SubItemSeparatorComponent?: React.ReactElement | Function;
  itemActiveOpacity?: number;
  subActiveOpacity?: number;
  openItems?: Array<number>;
  itemStyle?: StyleProp<ViewStyle>;
  subListProps?: StyleProp<FlatListProps<T>>;
  animation?: boolean;
  onPress?: () => void;
  onSubPress?: () => void;
}

export class ExpandableList extends Component<ExpandableListProps> { }
interface ReadMoreProps {
  renderViewMore?: (onPressMore: Function, style: Object) => void
  renderViewLess?: (onPressLess: Function, style: Object) => void;
  afterCollapse?: () => void;
  afterExpand?: () => void;
  numberOfLines?: number;
  textStyle?: StyleProp<TextStyle>;
  style?: StyleProp<ViewStyle>;
}

export class ReadMore extends React.Component<ReadMoreProps>{ }

interface HorizontalProgressPageGuideScreen {
  onNext(): void, // call to move page to next
  onBack(): void, // call to back to previous page
  onDone(): void, // call to page guide done, call back in onDone of page guide;
  buttonDisable?: (disable: boolean) => void
}

interface HorizontalProgressPageGuideStepData {
  name?: string;
  screen?: HorizontalProgressPageGuideScreen
}

interface HorizontalProgressPageGuideProps {
  duration?: number;
  pageContainerStyle?: StyleProp<ViewStyle>;
  progressColor?: string;
  buttonTitleDone?: string;
  buttonTitleNext?: string;
  steps?: Array<HorizontalProgressPageGuideStepData>;
  onDone?: () => void;
  onIndexChanged?: (index: number) => void
}
export class HorizontalProgressPageGuide extends React.Component<HorizontalProgressPageGuideProps> { }

interface RatingStarProps {
  disabled?: boolean;
  maxStars?: number;
  rating?: number;
  starSize?: number;
  starPadding?: number;
  tintColor?: string
  onStarChange?: () => void;
}
export class RatingStar extends React.Component<RatingStarProps> { }

type Language = 'vi' | 'en'

export class LocalizedStrings {
  constructor(localizedStringMap, language: Language);
  static setLanguage(language: Language)
  static addLanguage(language: Object)
  static getString(language: Language, key: string)
  static getObject(key: string)
  static getLocalize(key: string | Object)
  static getLanguage(): Language
}

interface BarCodeViewProps {
  code?: string;
  width?: number;
  height?: number
}

export class BarCodeView extends React.Component<BarCodeViewProps> { }

interface QRCodeViewProps {
  code?: string;
  size?: number
}

export class QRCodeView extends React.Component<QRCodeViewProps> { }

interface NumberKeyboardProps {
  onBackSpace?: () => void;
  onPress?: (number: number) => void
}


export class NumberKeyboard extends React.Component<NumberKeyboardProps> { }

interface AlertBarMessageProps {
  duration?: number;
  icon?: string;
  autoClose?: boolean;
  buttonTitle?: string;
  hideCloseIcon?: boolean;
  direction?: "row" | "column"
  buttonStyle?: StyleProp<ViewStyle>;
  style?: StyleProp<ViewStyle>;
  iconStyle?: StyleProp<ImageStyle>;
  messageStyle?: StyleProp<TextStyle>
  bodyStyle?: StyleProp<ViewStyle>;
  renderBody?: () => void;
  onButtonPress?: () => void;
}

export class AlertBarMessage extends React.Component<AlertBarMessageProps> {
  static show(message: string, height: number): void;
  static show(message: string): void;
  static hide?: () => void;
}

interface SearchInputProps extends TextInputProps {
  textStyle?: StyleProp<TextStyle>;
  debound?: number // default 100
}

export class SearchInput extends React.Component<SearchInputProps> { }

interface FilterProps {
  value?: string;
  source?: number | string | { uri: string };
  onPress?: () => void;
}

export class Filter extends React.Component<FilterProps> { }

interface HorizontalSelectionDateProps {
  lenghtRangeDate?: number;
  dateSelected?: Date;
  maxDate?: Date;
  minDate?: Date;
  removeClippedSubviews?: boolean;
  style?: StyleProp<ViewStyle>;
  onPress?: () => void;
}

export class HorizontalSelectionDate extends React.Component<HorizontalSelectionDateProps> { }

interface CinemaBrandProps {
  body?: String;
  discountImage?: Number | String | { uri: String };
  distance?: String;
  selected?: Boolean;
  source?: Number | String | { uri: String };
  style?: StyleProp<ViewStyle>;
  iconStyle?: StyleProp<ImageStyle>;
  titleStyle?: StyleProp<TextStyle>;
  bodyStyle?: StyleProp<TextStyle>;
  rightIconStyle: StyleProp<ImageStyle>;
  title?: String;
  type?: 'listItem' | 'default';
  onPress?: () => void;

}

export class CinemaBrand extends React.Component<CinemaBrandProps> { }

interface SwiperProps extends React.PropsWithChildren<{
  horizontal?: boolean;
  containerStyle?: StyleProp<ViewStyle>;
  style?: StyleProp<ViewStyle>;
  scrollViewStyle?: StyleProp<ViewStyle>;
  pagingEnabled?: boolean;
  showsHorizontalScrollIndicator?: boolean;
  showsVerticalScrollIndicator?: boolean;
  bounces?: boolean;
  scrollsToTop?: boolean;
  removeClippedSubviews?: boolean;
  automaticallyAdjustContentInsets?: boolean;
  showsPagination?: boolean;
  showsButtons?: boolean;
  disableNextButton?: boolean;
  loadMinimal?: boolean;
  loadMinimalSize?: number;
  loadMinimalLoader?: any;
  loop?: boolean;
  autoplay?: boolean;
  autoplayTimeout?: number;
  autoplayDirection?: boolean;
  index?: number;
  dotStyle?: StyleProp<ViewStyle>;
  activeDotStyle?: StyleProp<ViewStyle>;
  dotColor?: string;
  activeDotColor?: string;
  /**
 * Called when the index has changed because the user swiped.
 */
  onIndexChanged?: (index: number) => void
  renderPagination?: (index, total) => JSX.Element;
}> { }

export class Swiper extends React.Component<SwiperProps> { }

interface TransactionHistoryItem {
  lastUpdate?: number;
  status?: number;
  newDesc?: string;
  desc?: string;
  icon?: ImageSourcePropType | string;
  useVoucher?: 0 | 1;
  amount?: number;
  originalAmount?: number;
  io?: number;
  tranType?: number;
  error?: 0 | 1 | undefined
}
interface TransactionHistoryListProps extends Omit<FlatListProps<TransactionHistoryItem>, "data"> {
  ListEmptyComponent?: JSX.Element;
  data: Array<TransactionHistoryItem>;
  style?: StyleProp<ViewStyle>;
  headerTitle?: String;
  amountTitle?: String;
  hideHeader: Boolean;
  hideMonthHeader: Boolean;
  onItemPress?: (item: TransactionHistoryItem, index: number) => void;
  onViewAllPress?: () => void
}

export class TransactionHistoryList extends React.Component<TransactionHistoryListProps> {
  static getFlatListRef(): React.RefObject<any> | React.MutableRefObject<any>
}

interface ButtonFooterProps {
  buttonProps?: CustomButtonProps;
  leftTitle?: string;
  leftTitleStyle?: StyleProp<TextStyle>;
  rightTitle?: string;
  rightTitleFormat?: 'currency' | 'normal'
  rightTitleStyle?: StyleProp<TextStyle>;
  subRightTitleStyle?: StyleProp<TextStyle>;
  subLeftTitleStyle?: StyleProp<TextStyle>;
  bodyStyle: StyleProp<ViewStyle>;
  style?: StyleProp<ViewStyle>;
  subLeftTitle?: string;
  subRightTitle?: string;
  subRightTitleFormat?: 'currency' | 'normal';
  headerStyle: StyleProp<ViewStyle>,
  lineStyle: StyleProp<ViewStyle>,
  buttonLeftComponent?: () => void;
  buttonRightComponent?: () => void;
  bodyStyle: StyleProp<ViewStyle>,
}

export class ButtonFooter extends React.Component<ButtonFooterProps> { }

interface ZoomableImageProps {
  imageHeight?: Number;
  imageWidth?: Number;
  useNativeImage: Boolean,
  resizeMode?: "center" | "contain" | "cover" | "repeat" | "stretch"
  source?: String | Number | { uri: String };
  style?: StyleProp<ViewStyle>,
  overlayStyle?: StyleProp<ViewStyle>,
}

export class ZoomableImage extends React.Component<ZoomableImageProps> { }

interface ImageProps {
  style?: StyleProp<ViewStyle>;
  source: string | {
    uri?: string;
    cache?: 'immutable' | 'web' | 'cacheOnly';
    priority?: 'low' | 'normal' | 'high';
    headers?: Object;
    timeCache?: Number
  };
  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center';
  onLoadStart?: Function;
  onProgress?: Function;
  onLoad?: Function;
  onError?: Function;
  onLoadEnd?: Function;
  cached?: boolean;
  tintColor?: string | number;
  thumbnail?: any,
  thumbDuration?: number,
  sourceDuration?: number,
  placeholder?: any,
  loading?: boolean
}

export class Image extends React.Component<ImageProps> { }

interface ListPickerProps {
  arrData?: Array<string>
}

export class ListPicker extends React.Component<ListPickerProps> { }


interface NavigationButtonProps {
  icon?: number | { uri: string };
  iconStyle?: StyleProp<ImageStyle>;
  style?: StyleProp<ViewStyle>;
  tintColor?: string;
  title?: string;
  titleStyle?: StyleProp<TextStyle>;
  onPress?: () => void;
}

export class NavigationButton extends React.Component<NavigationButtonProps> { }

interface RowItemProps {
  body?: string;
  containerStyle?: StyleProp<ViewStyle>;
  containerTitleStyle?: StyleProp<ViewStyle>;
  hasArrow?: boolean;
  icon?: boolean;
  iconSytle?: StyleProp<ImageStyle>;
  rightComponent?: any;
  rightTitle?: string;
  rightTitleStyle?: StyleProp<TextStyle>;
  title?: string;
  titleStyle?: StyleProp<TextStyle>;
  lineStyle?: StyleProp<ViewStyle>;
  isShowTag?: boolean;
  iconTag?: ImageSourcePropType | string;
  tagStyle?: StyleProp<ImageStyle>;
  badge?: string;
  badgeStyle?: StyleProp<ViewStyle>;
  badgeTextStyle?: StyleProp<TextStyle>;
  onPress?: () => void;
}

export class RowItem extends React.Component<RowItemProps> { }

/**
 * Calendar
 */
export type CalendarType = 'signleDate' | 'doubleDate';

interface CalendarProps {
  minDate?: Date;
  maxDate?: Date;
  mode?: CalendarType;
  selectedDate?: Date;
  onDateChange?: () => void;
  isHiddenSwitch?: boolean;
  isShowLunar?: boolean;
  doubleDate?: object;
  id?: number;
  onCTAStateChange?: () => void;
  onCallbackCalendar?: () => void;
  i18n?: string;
  format?: string;
  customI18n?: object;
  priceList?: any,
  labelFrom?: string,
  labelTo?: string,
  headerFrom?: string,
  headerTo?: string,
  isHideLabel?: boolean,
  isHideHoliday?: boolean,
}

export class Calendar extends React.Component<CalendarProps> { }

interface SnackBarLocationProps {
  content?: string;
  onClose?: () => void;
  onPress?: () => void
}

export class SnackBarLocation extends React.Component<SnackBarLocationProps> { }


interface TouchableOpacityCustomProps extends TouchableOpacityProps {
  delay?: number
}

export class TouchableOpacity extends React.Component<TouchableOpacityCustomProps> { }

interface LightBoxProps {
  activeProps?: Object;
  springConfig: Object;
  swipeToDismiss: boolean;
  underlayColor?: string;
  backgroundColor?: string;
  renderHeader?: () => JSX.Element;
  renderContent?: () => JSX.Element;
  didOpen?: () => void;
  onOpen?: () => void;
  willClose?: () => void;
  onClose?: () => void;
  onLongPress?: () => void;
}

export class LightBox extends React.Component<LightBoxProps> { }

interface ExpandCollapseProps<T = {}> {
  canExpandAll?: boolean;
  data: Array<T>;
  initialActive?: number;
  style?: StyleProp<ViewStyle>;
  sectionTitleStyle?: StyleProp<ViewStyle>;
  sectionStyle?: StyleProp<ViewStyle>;
  sectionSubTitleStyle?: StyleProp<ViewStyle>;
  isHighlight: boolean,
  onSelect?: () => void;
  renderItem?: (info: { item: T, index: number }) => JSX.Element;
  renderSection: (info: { item: T, index: number }) => JSX.Element;
  containerItemStyle?: StyleProp<ViewStyle>;
}

export class ExpandCollapse extends React.Component<ExpandCollapseProps> { }




export type WebViewProps = IOSWebViewProps & AndroidWebViewProps;

export class WebView extends Component<WebViewProps> {
  /**
   * Go back one page in the webview's history.
   */
  goBack: () => void;

  /**
   * Go forward one page in the webview's history.
   */
  goForward: () => void;

  /**
   * Reloads the current page.
   */
  reload: () => void;

  /**
   * Stop loading the current page.
   */
  stopLoading?: () => void;

  /**
   * Extra Native Component Config.
   */
  extraNativeComponentConfig: () => any;

  /**
   * Executes the JavaScript string.
   */
  injectJavaScript: (script: string) => void;

  /**
   * Focuses on WebView redered page.
   */
  requestFocus: () => void;
}

interface TooltipProps {
  isVisible?: boolean;
  mode?: 'modal' | 'view' | 'js-modal';
  placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right';
  verticalOffset?: number;
  popoverStyle?: StyleProp<ViewStyle>;
  arrowStyle?: StyleProp<ViewStyle>;
  backgroundStyle?: StyleProp<ViewStyle>;
  onOpenStart?: () => void;
  onOpenComplete?: () => void;
  onRequestClose?: () => void;
  onCloseStart?: () => void;
  onCloseComplete?: () => void;
}

export class Tooltip extends React.Component<TooltipProps> { }

interface DraggableButtonProps {
  keyBoardPosition?: number,
  defaultPosition?: object,
  boundInside?: object,
  icon?: any,
  blurInActive?: boolean,
  style?: any,
  isLeft?: boolean,
  isShow?: boolean,
  message?: string,
  keyBoardPosition?: number,
  isCloseIcon?: boolean,
  requestClose?: () => void,
  isHasBottomBar?: boolean,
  lottieProps?: object,
  isLottie?: boolean
}

export class DraggableButton extends React.Component<DraggableButtonProps> {

  show: (delay: number, position: number) => void;


  hide: () => void;


  updateMessage: (message: string, autoHideTimeout: boolean, duration: number) => void;


  setOnPressAction: () => void;


  updateActionSheetArgs: (args: object, showImmediately: boolean) => void;


  showActionSheet: () => void;


  updateImage: (source) => void;

}

interface BarChartProps<T = {}> {
  activeAxisXColor?: string;
  activeBarColor?: string;
  activeValueColor?: string;
  colorAxisX?: string;
  inactiveAxisXColor?: string;
  inactiveBarColor?: string;
  showAxisX?: boolean;
  showUnit?: boolean;
  data?: any[];
  minValueAxisY?: number;
  onPress?: () => void;
  pressEnabled?: boolean;
  showAxisY?: boolean;
  suffix?: string;
  unit?: number;
  style?: StyleProp<ViewStyle>;
  unitNoteStyle?: StyleProp<ViewStyle>;
}

export class BarChart extends React.Component<BarChartProps> { }

interface ScrollableTabStringProps {
  dataTabs: Array<Object>,
  dataSections: Array<Object>,
  isParent: boolean,
  headerTransitionWhenScroll: boolean,
  tabPosition?: 'top' | 'bottom',
  customTabNamesProps: FlatListProps<Object>,
  customSectionProps: FlatListProps<Object>,
  selectedTabStyle: StyleProp<ViewStyle>,
  unselectedTabStyle: StyleProp<ViewStyle>,
  renderSection: Function,
  renderTabName: Function,
  onPressTab: Function,
  onScrollSection: Function,
  headerView: Function,
}

export class ScrollableTabString extends React.Component<ScrollableTabStringProps> { }

interface SelectionTagProps {
  leftIcon?: ImageSourcePropType | string;
  rightIcon?: ImageSourcePropType | string;
  title?: string;
  selected?: boolean;
  style?: StyleProp<ViewStyle>;
  selectedBackgroundColor?: string;
  selectedTextColor?: string;
  onPress?: () => void;
}

export class SelectionTag extends React.Component<SelectionTagProps> { }


interface SelectionProps {
  leftIcon?: ImageSourcePropType | string;
  rightIcon?: ImageSourcePropType | string;
  title?: string;
  type?: 'primary' | 'outline' | 'default';
  style?: StyleProp<ViewStyle>;
  onPress?: () => void;
}

export class Selection extends React.Component<SelectionProps> { }

interface ConnectionStatusProps {
  connected?: boolean, // default true
  duration?: number, // default 200
}

export class ConnectionStatus extends React.Component<ConnectionStatusProps>{

}
interface ImageListProps {
  data?: Array<ImageSourcePropType> | string | Number
  numColumn?: number;
  numRow?: number;
  rightTitle?: string;
  style?: StyleProp<ViewStyle>;
  title?: string;
  titleStyle?: StyleProp<TextStyle>;
  uriKey?: string;
  onPress?: () => void;
  onRightTitlePress?: () => void;
}

export class ImageList extends React.Component<ImageListProps> { }


interface ImagePickerListProps {
  defaultImages?: Array<string>;
  numColumn?: Number;
  style?: StyleProp<ViewStyle>;
  title?: string;
  titleStyle?: StyleProp<TextStyle>;
  maxFile: Number;
  onImageListChange?: (images: Array<string>) => void;
  onPickPress?: () => void;
  onPress?: (imageUri: string) => void;
}

export class ImagePickerList extends React.Component<ImagePickerListProps> {
  static addImage(imageUri: string): void
  static getImages(): Array<string>
  static clear(): void
}

interface RadioButtonProps<T = {}> {
  data: Array<number | string>
  defaultIndex?: number
  direction?: 'column' | 'row'
  disableButtons?: { index: boolean }
  disableOnChange?: boolean
  style?: StyleProp<ViewStyle>
  title?: string
  titleStyle?: StyleProp<TextStyle>
  valueStyle?: StyleProp<TextStyle>
  itemContainerStyle?: StyleProp<ViewStyle>
  numColumns?: Number
  listProps?: FlatListProps<T>
  renderRadioButton: (props: RadioProps) => Array<Radio>;
  onChange?: (index: number) => void

}

export class RadioButton extends React.Component<RadioButtonProps>{ }

interface LanguageSelectionProps {
  containerStyle?: StyleProp<ViewStyle>;
  tabStyle?: StyleProp<ViewStyle>;
  textActiveColor?: string;
  textInActiveColor?: string;
  value?: string
}

export class LanguageSelection extends React.Component<LanguageSelectionProps>{ }

interface StepProps {
  lineColor?: string;
  data?: Array<string>;
  currentStep?: number;
  tintColor?: string;
  style?: StyleProp<ViewStyle>
}

export class Step extends React.Component<StepProps>{ }

interface MessageInformationProps {
  buttonPosition?: 'left' | 'right',
  buttonTitle?: string,
  hideCloseIcon?: boolean,
  icon?: number | string | { uri: string },
  iconSize?: 'default' | 'small',
  message?: string,
  style?: StyleProp<ViewStyle>,
  tintColor?: string,
  shortenMessage?: string,
  numberOfLineWhenShorten?: number,
  expandable?: boolean,
  initExpandState?: boolean,
  maxCharactersDisplay?: number,
  buttonStyle?: StyleProp<TextStyle>,
  useHtml?: boolean,
  onClose?: () => void,
  onPress?: () => void,
}

export class MessageInformation extends React.Component<MessageInformationProps>{ }

export class Spacing {
  static XXS;// 2;
  static XS;// 4;
  static S;// 8;
  static M;// 12;
  static L;// 16;
  static XL;// 24
}


interface InforTableProps extends BankFeeProps {
  headerItem?: BankFeeItem
}

export class InforTable extends React.Component<InforTableProps>{ }

export function ApplicationStyle(): any;

export function ScaleSize(): any;

export class Radius {
  static XXS;// 2;
  static XS;// 4;
  static S;// 8;
  static M;// 12;
  static L;// 16;
  static XL;// 24
}

interface StickerViewProps {
  thumbnail?: string;
  source?: any;
  loaded?: boolean;
  lottieProps?: object;
  imageProps?: object;
  style?: object | object[];
}

export class StickerView extends React.Component<StickerViewProps>{ }

interface StickerPickerProps {
  selectGroup?: 'Emoji' | 'Sticker' | 'History';
  data?: any[];
  onSelect?: () => void;
  onPressBack?: () => void;
  onClose?: () => void;
  styleContentList?: StyleProp<ViewStyle>;
  onChangeTab?: () => void;
  onPressSearch?: () => void;
}

export class StickerPicker extends React.Component<StickerPickerProps>{ }


interface CinemaBrandGridProps extends FlatListProps<Object> {
  initialIndex: Number
  itemProps: CinemaBrandProps
  itemStyle: StyleProp<ViewStyle>
  numColumns: Number
  onItemProps(item: Object): CinemaBrandProps
  onItemPress(item: Object): void
}

export class CinemaBrandGrid extends React.Component<CinemaBrandGridProps>{

}

interface CountDownTimerProps {
  amount: Number,
  onFinish({ finished: Boolean }): void,
  size: Number,
  autoPlay
  textStyle: StyleProp<TextStyle>,
  style: StyleProp<ViewStyle>
}

export class CountDownTimer extends React.Component<CountDownTimerProps>{
  static stop();
  static continue();
  static start();
}

interface EffectProps {
  data: any[],
  content: any,
  size: number,
  style: StyleProp<ViewStyle>
}

export class Effect extends React.Component<EffectProps>{ }

interface LinearGradientProps extends ViewProps {
  colors: (string | number)[];
  start?: { x: number; y: number };
  end?: { x: number; y: number };
  locations?: number[];
  useAngle?: boolean;
  angleCenter?: { x: number, y: number };
  angle?: number;
}

export class LinearGradient extends React.Component<LinearGradientProps> { }



interface RadioProps extends ViewProps {
  disable: Boolean;
  selected: Boolean;
  hideTitle: Boolean;
  valueStyle: StyleProp<TextStyle>;
  value: String,
  style: StyleProp<ViewStyle>
}

export class Radio extends React.Component<RadioProps> { }

interface DraggableFlatListProps extends ViewProps {
  data?: [];
  horizontal?: boolean;
  renderItem?: () => JSX.Element;
  keyExtractor?: () => string;
  onDragBegin?: (index: number) => void;
  onRelease?: (index: number) => void;
  onDragEnd?: (params: { data: [], from: number, to: number }) => void;
  autoscrollThreshold?: number;
  autoscrollSpeed?: number
  onRef?: () => void
  animationConfig?: any;
  activationDistance?: number;
  layoutInvalidationKey?: string;
  onScrollOffsetChange?: (offset: number) => void;
  onPlaceholderIndexChange?: (index: number) => void;
  dragItemOverflow?: boolean;
  dragHitSlop?: object;
  debug?: boolean;
  containerStyle?: StyleProp<ViewStyle>;
  simultaneousHandlers?: React.Ref<any>[];
}

export class DraggableFlatList extends React.Component<DraggableFlatListProps> { }


interface ModalizeProps extends ViewProps {
  contentRef?: any;
  // Renderers
  children?: any;
  scrollViewProps?: any;
  flatListProps?: any;
  sectionListProps?: any;
  customRenderer?: any;
  // Styles
  rootStyle?: any;
  modalStyle?: any;
  handleStyle?: any;
  overlayStyle?: any;
  childrenStyle?: any;
  // Layout
  visible?: any;
  closeOnTouchOutside?: any;
  snapPoint?: any;
  modalHeight?: any;
  modalTopOffset?: any;
  alwaysOpen?: any;
  adjustToContentHeight?: any;
  // Options
  handlePosition?: any;
  disableScrollIfPossible?: any;
  avoidKeyboardLikeIOS?: any;
  keyboardAvoidingBehavior?: any;
  keyboardAvoidingOffset?: any;
  panGestureEnabled?: any;
  panGestureComponentEnabled?: any;
  tapGestureEnabled?: any;
  closeOnOverlayTap?: any;
  closeSnapPointStraightEnabled?: any;
  // Animations
  openAnimationConfig?: any;
  closeAnimationConfig?: any;
  dragToss?: any;
  threshold?: any;
  velocity?: any;
  panGestureAnimatedValue?: any;
  useNativeDriver?: any;
  // Elements visibilities
  withReactModal?: any;
  withHandle?: any;
  withOverlay?: any;
  // Additional components
  HeaderComponent?: any;
  FooterComponent?: any;
  FloatingComponent?: any;
  // Callbacks
  onOpen?: any;
  onOpened?: any;
  onClose?: any;
  onClosed?: any;
  onBackButtonPress?: any;
  onPositionChange?: any;
  onOverlayPress?: any;
  onLayout?: any;
}

export class Modalize extends React.Component<ModalizeProps> { }

/**
 * SuggestEmailList
 */

interface SuggestEmailListProps extends ViewProps {
  onPress?: () => void;
  style?: object;
  data?: string[];
  scrollEnabled?: boolean;
  defaultVisible?: boolean;
}

export class SuggestEmailList extends React.Component<SuggestEmailListProps> { }

interface AnimatedHeaderRightProps extends ViewProps {
  style?: object;
  onAction?: () => void;
  onClose?: () => void;
}

export class AnimatedHeaderRight extends React.Component<AnimatedHeaderRightProps> { }

interface SnackBarProps extends ViewProps {
  visible?: boolean,
    title?: string,
    undoLable?: string,
    undoLabelColor?: string,
    onUndo?: ()=>void,
    icon?: any,
    onDismiss?: ()=>void,
    duration?: number,
    type?: string
}

export class SnackBar extends React.Component<SnackBarProps> { }


interface XBannerProps extends ViewProps {
  title?: string,
  subTitle?: string,
  avatar?: string,
  style?: any,
  alignStyle?: string,
  renderFooter?: ()=>void,
  onClose?: ()=>void,
  onMoreInfo?: ()=>void,
  buttonTitle?: string,
  onPress?: ()=>void,
  buttonStyle?: any,
  moreInfo?: boolean
}

export class XBanner extends React.Component<XBannerProps> { }