/* eslint-disable @typescript-eslint/no-explicit-any */

import type { FC } from 'react';
import React from 'react';
import { Text, View } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { withTheme } from '../../branding';
import type { ThemeProps } from '../../branding/hoc/types';
import Modal from '../Modal';
import type { Styles } from './styles';
import themedStyles from './styles';
import { formatMessage, formatUpperCase } from '../../i18n';
import CreateUserForm from '../../components/CreateUserForm';
import SelectArtistItem from './SelectArtistItem';
import Divider from '../../components/Divider';
import type { FilterArtistItem } from '../../components/FilterArtist/types';
import type { CreateUserFormData } from '../../components/CreateUserForm/types';
import ModalTitle from '../../componentsDS/ModalTitle';

interface Props {
    artist: FilterArtistItem | undefined;
    onSelectArtistPress: () => void;
    hasError: boolean;
    validate: () => boolean;
    onValidationError: (error: string) => void;
    loading: boolean;
    onSubmitPressed: (data: CreateUserFormData) => void;
}

export const InviteUserModal = ({
    artist,
    onSelectArtistPress,
    hasError,
    validate,
    onValidationError,
    loading,
    onSubmitPressed,
    theme
}: Props & ThemeProps) => {
    const styles = (themedStyles as any)[theme] as Styles;
    const dividerStyle = hasError ? styles.errorDivider : undefined;

    return (
        <Modal
            style={styles.modal}
            headerText={
                <ModalTitle title={formatMessage('newUser.inviteUser')} />
            }
            headerVariant="dark"
        >
            <KeyboardAwareScrollView>
                <View style={styles.artistHeader}>
                    <Text style={styles.explanation}>
                        {formatMessage('newUser.inviteUserExplanation')}
                    </Text>
                    <SelectArtistItem
                        artist={artist}
                        onPress={onSelectArtistPress}
                    />
                </View>
                <Divider style={dividerStyle} />
                <CreateUserForm
                    style={styles.createUserForm}
                    title={formatUpperCase('newUser.userDetails')}
                    hasSubtitle={false}
                    noHorizontalMargin={true}
                    externalValidation={validate}
                    setExternalError={onValidationError}
                    errorMessageKey="newUser.selectedArtistAndCreationFormError"
                    submitting={loading}
                    onSubmit={onSubmitPressed}
                />
            </KeyboardAwareScrollView>
        </Modal>
    );
};

export default withTheme(InviteUserModal) as FC<Props>;