import type { Actions } from 'easy-peasy';
import { useStoreActions } from 'easy-peasy';
import type { FormikHelpers } from 'formik';
import { useNavigate } from 'react-router-dom';

import type { UpdateUserValues } from '@/api/admin/users';
import { updateUser } from '@/api/admin/users';
import UserDeleteButton from '@/components/admin/users/UserDeleteButton';
import UserForm from '@/components/admin/users/UserForm';
import { Context } from '@/components/admin/users/UserRouter';
import type { ApplicationStore } from '@/state';
import tw from 'twin.macro';

const UserAboutContainer = () => {
    const navigate = useNavigate();

    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
        (actions: Actions<ApplicationStore>) => actions.flashes,
    );

    const user = Context.useStoreState(state => state.user);
    const setUser = Context.useStoreActions(actions => actions.setUser);

    if (user === undefined) {
        return <></>;
    }

    const submit = (values: UpdateUserValues, { setSubmitting }: FormikHelpers<UpdateUserValues>) => {
        clearFlashes('user');

        updateUser(user.id, values)
            .then(() => setUser({ ...user, ...values }))
            .catch(error => {
                console.error(error);
                clearAndAddHttpError({ key: 'user', error });
            })
            .then(() => setSubmitting(false));
    };

    return (
        <UserForm
            title={'Edit User'}
            initialValues={{
                externalId: user.externalId,
                username: user.username,
                email: user.email,
                adminRoleId: user.adminRoleId,
                password: '',
                rootAdmin: user.isRootAdmin,
            }}
            onSubmit={submit}
            uuid={user.uuid}
            role={user.relationships.role || null}
        >
            <div css={tw`flex`}>
                <UserDeleteButton userId={user.id} onDeleted={() => navigate('/admin/users')} />
            </div>
        </UserForm>
    );
};

export default UserAboutContainer;