import React, { useState } from "react";
import Modal from "./Modal";
import "../../Style/LoginModal.css";
import TextField from '@mui/material/TextField';

const LoginModal = ({ onLogin, onClose }) => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [showPassword, setShowPassword] = React.useState(false);

  const handleClickShowPassword = () => setShowPassword((show) => !show);

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      // Отправляем данные на бэкенд
      console.log("Отправляем данные:", { username, password });
      const response = await fetch('http://192.168.2.43:3000/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ login: username, password }),
      });

      const data = await response.json();

      if (data.success) {
        onLogin(); // Успешная авторизация
        onClose(); // Закрыть модальное окно
      } else {
        setError(data.message || "Неверный логин или пароль");
      }
    } catch (err) {
      console.error('Ошибка при отправке запроса:', err);
      setError("Ошибка при подключении к серверу");
    }
  };

  return (
    <Modal onClose={onClose}>
      <h2>Авторизация</h2>
      <form onSubmit={handleSubmit}>
        <TextField
          fullWidth
          id="user-login"
          label="Логин"
          variant="filled"
          margin="normal"
          required
          onChange={(e) => setUsername(e.target.value)}
          size="normal"
        />

        <TextField
          fullWidth
          id="user-password"
          label="Пароль"
          variant="filled"
          margin="normal"
          required
          type={showPassword ? 'text' : 'password'}
          onChange={(e) => setPassword(e.target.value)}
          size="normal"
        />

        {error && <p className="error">{error}</p>}
        <button type="submit">Войти</button>
      </form>
    </Modal>
  );
};

export default LoginModal;