// @ts-nocheck
import React, { useEffect, useRef, useState } from 'react';
import type { RouteProp } from '@react-navigation/native';
import { useNavigation, useRoute } from '@react-navigation/native';
import useInviteUserArtistFilter from '../../hooks/useInviteUserArtistFilter';
import { INVITE_USER_ARTIST_FILTER_MODAL } from '../../constants/screens';
import InviteUserModal from './InviteUserModal';
import type { CreateUserFormData } from '../../components/CreateUserForm/types';
import useCreateUser from '../../hooks/useCreateUser';
import { showToast } from '../../components/Toaster';
import { formatMessage } from '../../i18n';
import { logException } from '../../services/sentry.service';
import useParticipantResourceAccess from '../../hooks/useParticipantResourceAccess';
import type { FilterArtistItem } from '../../components/FilterArtist/types';
import { trackEvent } from '../../services/analytics.service';
import { createUserRequestSubmittedArtistEvent } from '../../services/analytics.service/events';
import { useTheme } from '../../branding';

interface StackParamsList {
    InviteUserModal: {
        artistId: string;
        artistName: string;
        artistImageUrl: string;
        referrer: string;
    };
}

export const InviteUserModalContainer = () => {
    const navigation = useNavigation();
    const route = useRoute<RouteProp<StackParamsList, 'InviteUserModal'>>();
    const artistId = route?.params?.artistId ?? '';
    const artistName = route?.params?.artistName ?? '';
    const artistImageUrl = route?.params?.artistImageUrl ?? '';
    const referrer = route?.params?.referrer ?? '';
    const defaultArtist: FilterArtistItem = {
        id: artistId,
        name: artistName,
        imageUrl: artistImageUrl
    };
    const { filter, setDefaultArtist, clearArtist } =
        useInviteUserArtistFilter();
    const [validationError, setValidationError] = useState<string>();
    const hasError = validationError !== undefined && !filter.artist;
    const enteredEmail = useRef<string>('');
    const artist = filter.artist ?? defaultArtist;
    const { colors } = useTheme();

    useEffect(() => {
        setDefaultArtist(defaultArtist);
        return () => clearArtist();
    }, []);

    const [
        { labelParticipantIds },
        { loading: labelParticipantIdsLoading, data: labelParticipantIdsData }
    ] = useParticipantResourceAccess({
        id: artist.id
    });

    const onCreateUserSuccess = () => {
        trackEvent(createUserRequestSubmittedArtistEvent(referrer));
        showToast({
            message: formatMessage('newUser.success', {
                userEmail: enteredEmail.current
            }),
            actionText: formatMessage('toast.dismiss'),
            handlePressAction: hideToast => hideToast(),
            style: {
                backgroundColor: colors.success350
            }
        });
    };

    const onCreateUserError = () => {
        showToast({
            message: formatMessage('error.zero.title'),
            actionText: formatMessage('toast.dismiss'),
            handlePressAction: hideToast => hideToast(),
            style: {
                backgroundColor: colors.error350
            }
        });
    };
    const [createUser, { loading: createUserLoading }] = useCreateUser({
        onCreateUserSuccess,
        onCreateUserError
    });

    const onSelectArtistPress = () => {
        // @ts-ignore
        navigation.navigate(INVITE_USER_ARTIST_FILTER_MODAL);
    };
    const onSubmitPressed = (createUserFormData: CreateUserFormData) => {
        if (
            labelParticipantIdsLoading ||
            !labelParticipantIdsData ||
            createUserLoading
        ) {
            return;
        }
        const { firstName, lastName, email } = createUserFormData;
        enteredEmail.current = email;
        createUser({
            firstName,
            lastName,
            email,
            labelParticipantIds
        }).catch(logException);
    };

    const validate = () => filter.artist !== undefined;

    return (
        <InviteUserModal
            artist={filter.artist}
            onSelectArtistPress={onSelectArtistPress}
            hasError={hasError}
            validate={validate}
            onValidationError={setValidationError}
            loading={createUserLoading}
            onSubmitPressed={onSubmitPressed}
        />
    );
};

export default InviteUserModalContainer;