import React from "react"
import { StyleProp, ViewStyle } from 'react-native';
import { Easing, SharedValue, EasingFn } from 'react-native-reanimated';

type _animationType = 'none' | 'shiver' | 'pulse' | undefined;
type _animationDirection =
  | 'horizontalLeft'
  | 'horizontalRight'
  | 'verticalTop'
  | 'verticalDown'
  | 'diagonalDownLeft'
  | 'diagonalDownRight'
  | 'diagonalTopLeft'
  | 'diagonalTopRight'
  | undefined;

export interface ICustomViewStyle extends ViewStyle {
  children?: ICustomViewStyle[];
  key?: number | string;
}

export interface ISkeletonProps {
  isLoading: boolean;
  layout?: ICustomViewStyle[];
  duration?: number;
  containerStyle?: StyleProp<ViewStyle>;
  animationType?: _animationType;
  animationDirection?: _animationDirection;
  boneColor?: string | undefined;
  hasFadeIn?: boolean;
  highlightColor?: string | undefined;
  easing?: { factory: () => EasingFn };
  children?: React.ReactNode;
}

export interface IComponentSize {
  width: number;
  height: number;
}

export interface IGeneralStyles {
  animationDirection: _animationDirection;
  animationType: _animationType;
  boneColor: string;
  highlightColor: string;
  animationValue: SharedValue<number>;
}

export interface IDirection {
  x: number;
  y: number;
}

export const DEFAULT_CONFIG = {
  BORDER_RADIUS: 3,
  DURATION: 1200,
  ANIMATION_TYPE: 'shiver' as _animationType,
  ANIMATION_DIRECTION: 'horizontalLeft' as _animationDirection,
  BONE_COLOR: '#E1E9EE',
  HIGHLIGHT_COLOR: '#F2F8FC',
  EASING: Easing.bezier(0.5, 0, 0.25, 1),
  LOADING: true,
};