// pages/DashboardPage.tsx
import React, { useState } from 'react';
import {useUser} from "../../utils/users/UseUser.ts";
import {changePassword} from "../../API/users.ts";


export function DashboardPage() {
    // Получаем данные о пользователе
    const userContext = useUser();
    const user = userContext?.user;

    // Состояние для управления модальным окном
    const [isModalOpen, setModalOpen] = useState(false);
    const [currentPassword, setCurrentPassword] = useState('');
    const [newPassword, setNewPassword] = useState('');

    // Обработчик смены пароля
    const handleChangePassword = async () => {
        try {
            await changePassword({ currentPassword, newPassword });
            alert('Пароль успешно изменен!');
            setModalOpen(false); // Закрыть модальное окно после успешной смены пароля
        } catch (error) {
            alert('Ошибка при смене пароля: ' + error.message);
        }
    };

    return (
        <div className="dashboard">
            <div className="welcome-message">
                С возвращением, {user?.last_name} {user?.first_name} {user?.middle_name}!
            </div>
            <div className="user-role">
                Вы вошли как: {user?.roleTitle}
            </div>

            {
                !isModalOpen &&
                <button className="change-password-button" onClick={() => setModalOpen(true)}>
                Поменять пароль
                </button>
            }

            {isModalOpen && (
                <div className="change-password">
                <div className="modal-content">
                        <label>
                            Текущий пароль:
                            <input
                                type="password"
                                value={currentPassword}
                                onChange={(e) => setCurrentPassword(e.target.value)}
                            />
                        </label>
                        <label>
                            Новый пароль:
                            <input
                                type="password"
                                value={newPassword}
                                onChange={(e) => setNewPassword(e.target.value)}
                            />
                        </label>
                        <button onClick={handleChangePassword}>Сменить пароль</button>
                        <button onClick={() => setModalOpen(false)}>Закрыть</button>
                    </div>
                </div>
            )}
        </div>
    );
}