import * as React from "react";
import { useCallback } from "react";
import {
  AUTH_PROVIDERS,
  AUTH_LOGIN_BUTTON,
  AUTH_LOGIN_BUTTON_STYLE,
} from "../../services/auth";
import { useSiteSettings } from "../../providers/site";
import { LoginWithButton } from "./login-with-button";
import { View } from "react-native";
import { style } from "./style";
import { icons, IconTypes } from "../icon/icons";
import { Icon } from "../icon/icon";

export const LoginButttons = ({
  onPress,
}: {
  onPress: (key: keyof typeof AUTH_PROVIDERS) => any;
}) => {
  const {
    regions: {
      header: { authentication },
    },
  } = useSiteSettings();

  const authDebug = {
    ...authentication,
    maestro: false, // Maestro login is handled in the login modal
    debug: false,
  };

  const onLoginButtonPress = useCallback(
    (key) => () => onPress && onPress(key),
    [onPress]
  );

  return (
    <View style={style.loginButtons}>
      {Object.keys(authDebug).map((key: keyof typeof AUTH_PROVIDERS) => {
        const { color, backgroundColor } = AUTH_LOGIN_BUTTON_STYLE[
          key as "facebook" | "twitch"
        ];
        if ((authDebug as any)[key]) {
          return (
            <LoginWithButton
              key={key as string}
              onPress={onLoginButtonPress(key)}
              color={color}
              backgroundColor={backgroundColor}
              icon={
                (icons as any)[key] ? <Icon icon={key as IconTypes} /> : null
              }
            >
              {(AUTH_LOGIN_BUTTON as any)[key]}
            </LoginWithButton>
          );
        }
        return null;
      })}
    </View>
  );
};