import React, {ChangeEvent, FormEvent} from "react";
import {connect} from "react-redux";
import {fetchUser, updateUser} from "../../../api/users";
import Loading from "../../../ui/Loading";
import './APUser.sass';
import {addNotification} from "../../../store/actions";
import NotificationMessage from "../../../ui/Notifications/NotificationMessage";
import Button from "../../../ui/Button/Button";

type Props = {
    userId: number
    addNotification: (notification: React.ReactNode) => void
};

type State = {
    user: UserType | null
    username: string
};

class ModifyUser extends React.Component<Props, State> {
    state: State = {
        user: null, username: ''
    }

    componentDidMount() {
        const { userId } = this.props;
        fetchUser(userId).then((user: UserType) => {
            this.setState({ user, username: user.username });
            document.title = `${user.username} / Админ-панель`;
        })
    }

    onChange = (event: ChangeEvent<HTMLInputElement>) => {
        const user = Object.assign({}, this.state.user);
        const target = event.target;
        // @ts-ignore
        user[target.name] = target.type === 'checkbox' ? target.checked : target.value;
        this.setState({ user })
    }

    onSubmit = (event: FormEvent) => {
        event.preventDefault();
        const { user } = this.state;
        const { addNotification } = this.props;

        if(user === null) {
            console.error('Пользователь - null!');
            return;
        }
        updateUser(user).then(() => {
            const notification = (
                <NotificationMessage level={"success"}>
                    Пользователь успешно изменен!
                </NotificationMessage>
            )
            addNotification(notification)
        });
    }

    render() {
        const { user, username } = this.state;

        if(!user) return <Loading/>;
        return (
            <div className={'APUser__Modify'}>
                <div className={'APUser__Modify_Title'}>{username}</div>
                <form className={'APUser__Modify_Form'} onSubmit={this.onSubmit}>
                    <label>Имя пользователя: <input type="text" onChange={this.onChange} name={'username'} value={user.username}/></label>
                    <label>Email: <input type='email' onChange={this.onChange} name={'email'} value={user.email}/></label>
                    <label>Аватар: <input type='text' onChange={this.onChange} name={'avatar'} value={user.avatar}/></label>

                    <label>Суперюзер: <input type='checkbox' onChange={this.onChange} name={'is_superuser'} checked={user.is_superuser}/></label>
                    <label>Активирован: <input type='checkbox' onChange={this.onChange} name={'is_activated'} checked={user.is_activated}/></label>

                    <div style={{ textAlign: "right" }}>
                        <Button>Сохранить!</Button>
                    </div>
                </form>
            </div>
        )
    }
}

export default connect(
    (state: StoreState) => ({
        user: state.currentUser
    }),
    (dispatch) => ({
        addNotification: (notification: React.ReactNode) => {
            dispatch(addNotification(notification))
        }
    })
)(ModifyUser);