import { EventArg } from '@react-navigation/core';
import { StackNavigationOptions } from '@react-navigation/stack';
import React, { ReactNode } from 'react';
import {
  Animated,
  TouchableOpacityProps,
  ViewProps,
  ViewStyle,
} from 'react-native';
import { PopupNotifyProps } from '../Popup/types';
import { InputRef, InputSearchProps } from '../Input';
import Navigation from './Navigation';

export type NavigationProps = {
  context: any;
  setOptions: (params: NavigationOptions) => void;
};

export type NavigatorProps = {
  ref?: any;
  isReady?: any;
  isWidget?: any;
  maxApi?: any;
  dismissData?: any;
  push: (params: ScreenParams) => void;
  replace: (params: ScreenParams) => void;
  pop: (count?: number) => void;
  present: (params: ScreenParams) => void;
  showModal: (params: ModalParams, onError?: (error: string) => void) => void;
  showBottomSheet: (
    params: BottomSheetParams,
    onError?: (error: string) => void,
  ) => void;
  popToTop: () => void;
  navigate: (name: string) => void;
  reset: (params: ScreenParams) => void;
  setDismissData: (data: any) => void;
  setCurrentContext: (context: {
    code?: string;
    name?: { vi: string; en: string };
    description?: { vi: string; en: string };
    icon?: string;
  }) => void;
};

export type LocalizeProps = {
  getCurrentLanguage: 'en' | 'vi';
  getAssets: LocalizationObject;
  translate: (key: string) => string;
  translateData: (data: { vi: string; en: string }) => string;
  addTranslations: (translations: LocalizationObject) => void;
};

export type Theme = {
  dark: boolean;
  colors: {
    primary: string;
    secondary: string;
    gradient: string;
    background: {
      default: string;
      surface: string;
      tonal: string;
      pressed: string;
      selected: string;
      disable: string;
    };
    text: {
      default: string;
      secondary: string;
      hint: string;
      disable: string;
    };
    border: {
      default: string;
      disable: string;
    };
    success: {
      primary: string;
      secondary: string;
      container: string;
    };
    warning: {
      primary: string;
      secondary: string;
      container: string;
    };
    error: {
      primary: string;
      secondary: string;
      container: string;
    };
    highlight: {
      primary: string;
      secondary: string;
      container: string;
    };
    interactive: {
      primary: string;
      secondary: string;
      container: string;
    };
  };
  font: string;
  assets?: {
    headerBackground?: string;
  };
};

export type ScaleSizeProviderProps = {
  scaleSizeMaxRate?: number;
  children: ViewProps['children'];
};

export type Context = {
  [key: string]: any;
  theme: Theme;
  navigator?: NavigatorProps;
  showGrid?: boolean;
  translate?: (data: string | { vi: string; en: string }) => string;
};

export type LocalizationObject = {
  vi: {
    [key: string]: string;
  };
  en: {
    [key: string]: string;
  };
};

export type ToolGroup = {
  title: { vi: string; en: string };
  items: Tool[];
};

export type Tool = {
  icon: string;
  name: { vi: string; en: string };
  key: string;
  showBadge?: boolean;
  showRightIcon?: boolean;
  onPress: () => void;
};

export type FeatureFlags = {
  enableFoundationList?: boolean;
  enableBottomTabAnimation?: boolean;
  enableHapticBottomTab?: boolean;
  enableHapticDialog?: boolean;
  showBaseLineDebug?: boolean;
};

export type NavigationContainerProps = {
  screen: React.ComponentType<NavigationScreenProps>;
  options?: NavigationOptions;
  theme?: Theme;
  maxApi: any;
  initialParams?: any;
  localize: LocalizeProps;
  features?: FeatureFlags;
};

export type WidgetContainerProps = {
  widget: React.ComponentType<any>;
  theme?: Theme;
  maxApi: any;
  localize: LocalizeProps;
};

export type NavigationScreenProps = {
  [key: string]: any;
  options?: NavigationOptions;
  navigation: Navigation;
};

export type ScreenParams = {
  [key: string]: any;
  screen: React.ComponentType<NavigationScreenProps>;
  options?: NavigationOptions;
};

export type ScreenTrackingParams = {
  value1?: any;
  value2?: any;
};

export type ModalParams = {
  [key: string]: any;
  screen: React.ComponentType;
  onDismiss?: () => void;
  barrierDismissible?: boolean;
  modalStyle?: ViewStyle;
  useNativeModal?: boolean;
};

export type BottomSheetParams = {
  [key: string]: any;
  screen: React.ComponentType;
  options: {
    header?: React.ReactNode;
    title?: string;
  };
  useNativeModal?: boolean;
  surface?: boolean;
  onDismiss?: (type?: string) => void;
  barrierDismissible?: boolean;
  draggable?: boolean;
  useBottomInset?: boolean;
  useKeyboardAvoidingView?: boolean;
  keyboardVerticalOffset?: number;
  useDivider?: boolean;
  footerComponent?: React.ReactNode;
  leftOptions?: {
    iconLeft?: string;
    onPressIconLeft?: () => void;
  };
};

export interface NavigationButtonProps extends TouchableOpacityProps {
  icon: string;
  tintColor?: string;
  showBadge?: boolean;
}

export type HeaderTitleProps = {
  type: 'default' | 'user' | 'location' | 'journey';
  data: TitleUserProps | TitleLocationProps | TitleJourneyProps;
};

export interface NavigationOptions
  extends Omit<StackNavigationOptions, 'headerRight' | 'headerTitle'> {
  preventBack?: PopupNotifyProps;
  onPressLeftHeader?: () => void;
  onBackHandler?: (goBack: () => void) => void;
  hiddenBack?: boolean;
  headerTitle?: HeaderTitleProps | string;
  headerRight?: OnBoarding | HeaderRightToolkit | any;
}

export type OnBoarding = {
  useOnBoarding?: boolean;
  onPress?: () => void;
};

export type HeaderRightToolkit = {
  useShortcut?: boolean;
  tools?: ToolGroup[];
  preventClose?: PopupNotifyProps;
  useMore?: boolean;
  useCloseIcon?: boolean;
};

export interface HeaderBackProps extends NavigationButtonProps {
  preventBack?: PopupNotifyProps;
  onPressLeftHeader?: () => void;
  onBackHandler?: (goBack: () => void) => void;
}

export type HeaderBackgroundProps = {
  animatedValue?: Animated.Value;
  useGradient?: boolean;
  useShadowHeader?: boolean;
  backgroundColor?: string;
  gradientColor?: string;
  headerBackground?: string;
};

export type TitleUserProps = {
  title: string;
  subTitle?: string;
  image?: string[] | string;
  dotColor?: string;
  verify?: boolean;
  tintColor?: string;
  onPress?: () => void;
  icons?: string[];
  isLoading?: boolean;
};

export type TitleLocationProps = {
  description?: string;
  location: string;
  tintColor?: string;
  onPress?: () => void;
  isLoading?: boolean;
};

export type TitleJourneyProps = {
  start: string;
  end?: string;
  description?: string;
  icon: string;
  iconColor?: string;
  tintColor?: string;
  onPress?: () => void;
  isLoading?: boolean;
};

export interface HeaderAnimatedProps extends ViewProps {
  animatedValue: Animated.Value;
  image: string;
  useScale?: boolean;
}

export type BottomTabItemProps = {
  name: string;
  label: string;
  icon: string;
  showDot?: boolean;
  badgeLabel?: string | number;
  screen: React.ComponentType<NavigationScreenProps>;
  options: NavigationOptions;
  initialParams?: any;
};

export type BottomTabProps = {
  nested?: boolean;
  tabs: BottomTabItemProps[];
  initialRouteName?: string;
  navigation: NavigationProps;
  listeners?: {
    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
    focus?: (e: EventArg<'focus', false, unknown>) => void;
    blur?: (e: EventArg<'blur', false, unknown>) => void;
  };
  floatingButton?: FloatingButtonProps;
};

export type FloatingButtonProps = {
  container?: React.ReactNode;
  icon: string | React.ReactNode;
  label: string;
  onPress: () => void;
};

export type AnimatedHeader = {
  headerTintColor?: string;
  component?: (props?: any) => React.ReactElement;
  headerTitle?: HeaderTitleProps | string;
};

export interface SearchHeaderProps extends InputSearchProps {
  ref?: React.RefObject<InputRef>;
  animatedValue?: Animated.Value;
  headerRightWidth?: 0 | 74 | 110 | number;
  leftPosition?: 12 | 48 | number;
  renderButtons?: () => ReactNode;
  hiddenBack?: boolean;
}