import * as React from 'react';
import type { ReactElement } from 'react';
import { ThemeProvider as ThemeProviderRS } from '@shopify/restyle';
import { ToastProvider } from 'react-native-toast-notifications';
import { theme } from './theme';
import type { Theme } from './theme';
import { AlertTop, IAlertComponentProps } from '../components/AlertTop';
import type { AlertTypes } from '../components/AlertTop/alert';

interface ThemeProviderProps {
  children?: ReactElement;
}

export const useTheme = (): Theme => {
  return { ...theme };
};

export const ThemeProvider = ({ children }: ThemeProviderProps) => {
  return (
    <ToastProvider
      placement="top"
      offset={50}
      renderToast={(toast) => {
        const type = toast.type as AlertTypes;
        const onPress = toast.onPress as IAlertComponentProps['onPress'];
        return (
          <ThemeProviderRS theme={theme}>
            <AlertTop
              message={toast.message}
              subMessage={toast.data?.subMessage}
              icon={toast.icon}
              data={toast.data}
              type={type}
              onPress={onPress}
            />
          </ThemeProviderRS>
        );
      }}
    >
      <ThemeProviderRS theme={theme}>{children}</ThemeProviderRS>
    </ToastProvider>
  );
};