import {
  Button,
  Paper,
  TextField,
  Checkbox,
  FormControlLabel,
} from "@mui/material";
import { observer } from "mobx-react-lite";
import { ArrowLeft, Save } from "lucide-react";
import { Loader2 } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import { userStore } from "@shared";
import { useState } from "react";

export const UserCreatePage = observer(() => {
  const navigate = useNavigate();
  const { createUserData, setCreateUserData, createUser } = userStore;
  const [isLoading, setIsLoading] = useState(false);

  const handleCreate = async () => {
    try {
      setIsLoading(true);
      await createUser();
      toast.success("Пользователь успешно создан");
      navigate("/user");
    } catch (error) {
      toast.error("Ошибка при создании пользователя");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Paper className="w-full h-full p-3 flex flex-col gap-10">
      <div className="flex items-center gap-4">
        <button
          className="flex items-center gap-2"
          onClick={() => navigate(-1)}
        >
          <ArrowLeft size={20} />
          Назад
        </button>
      </div>

      <div className="flex flex-col gap-10 w-full items-end">
        <TextField
          fullWidth
          label="Имя"
          value={createUserData.name || ""}
          required
          onChange={(e) =>
            setCreateUserData(
              e.target.value,
              createUserData.email || "",
              createUserData.password || "",
              createUserData.is_admin || false
            )
          }
        />

        <TextField
          fullWidth
          label="Email"
          value={createUserData.email || ""}
          required
          onChange={(e) =>
            setCreateUserData(
              createUserData.name || "",
              e.target.value,
              createUserData.password || "",
              createUserData.is_admin || false
            )
          }
        />

        <TextField
          fullWidth
          label="Пароль"
          value={createUserData.password || ""}
          required
          onChange={(e) =>
            setCreateUserData(
              createUserData.name || "",
              createUserData.email || "",
              e.target.value,
              createUserData.is_admin || false
            )
          }
        />

        <div className="w-full flex flex-col items-start">
          <FormControlLabel
            control={
              <Checkbox
                checked={createUserData.is_admin || false}
                onChange={(e) => {
                  setCreateUserData(
                    createUserData.name || "",
                    createUserData.email || "",
                    createUserData.password || "",
                    e.target.checked
                  );
                }}
              />
            }
            label="Администратор"
          />
        </div>

        <Button
          variant="contained"
          className="w-min flex gap-2 items-center"
          startIcon={<Save size={20} />}
          onClick={handleCreate}
          disabled={
            isLoading || !createUserData.name || !createUserData.password
          }
        >
          {isLoading ? (
            <Loader2 size={20} className="animate-spin" />
          ) : (
            "Создать"
          )}
        </Button>
      </div>
    </Paper>
  );
});