import React, { useEffect } from "react";
import { Form, Field } from "react-final-form";
import { useSelector, useDispatch } from "react-redux";
import { selectBranch, addAlert } from "../core/mainSlice";
import { login } from "./authSlice";
import { Grid } from "@material-ui/core";
import { unwrapResult } from "@reduxjs/toolkit";
import {
  Container,
  TextField,
  Button,
  Avatar,
  Typography,
  RadioGroup,
  Radio,
  FormControlLabel,
} from "@material-ui/core";
import Messages from "../core/Messages";
import { useTranslation } from "react-i18next";

const LoginForm = () => {
  const { t } = useTranslation();
  const branches = useSelector((state) => state.main.branches);
  const alerts = useSelector((state) => state.main.alerts);
  const dispatch = useDispatch();

  // useEffect(() => {
  //   dispatch(getBranches());
  // }, []);

  const renderBranches = () => {
    if (branches.length > 0) {
      return branches.map((branch) => {
        return (
          <FormControlLabel
            key={branch.id}
            value={branch.name}
            control={<Radio required={true} />}
            required
            onClick={() => {
              dispatch(selectBranch(branch));
            }}
            label={branch.name}
          />
        );
      });
    } else return null;
  };
  return (
    <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      style={{ minHeight: "100vh" }}
    >
      <Grid item xs={3}>
        <Container component="main" maxWidth="xs">
          {alerts.length > 0 ? <Messages /> : null}
          <Avatar></Avatar>
          <Typography component="h1" variant="h5">
            {process.env.REACT_APP_NAME} {t("auth.LoginForm.Login")}
          </Typography>
          <Form
            onSubmit={(values) => {
              dispatch(login(values))
                .then(unwrapResult)
                .then((originalPromiseResult) => {
                  dispatch(
                    addAlert({
                      name: "info",
                      message: t("messages.SuccessfullyLogedIn"),
                    })
                  );
                })
                .catch((rejectedValueOrSerializedError) => {
                  dispatch(addAlert(rejectedValueOrSerializedError));
                });
            }}
            render={({ handleSubmit, submitting, pristine, values }) => (
              <form onSubmit={handleSubmit} className="ui form error">
                <Field name="username">
                  {({ input, meta }) => (
                    <TextField
                      variant="outlined"
                      margin="normal"
                      required
                      fullWidth
                      label={t("auth.LoginForm.Username")}
                      autoFocus
                      {...input}
                      type="text"
                    />
                  )}
                </Field>
                <Field name="password">
                  {({ input, meta }) => (
                    <TextField
                      variant="outlined"
                      margin="normal"
                      required
                      fullWidth
                      autocomplet="current-password"
                      label={t("auth.LoginForm.Password")}
                      autoFocus
                      {...input}
                      type="password"
                    />
                  )}
                </Field>

                <RadioGroup aria-label="branch" name="branch" required row>
                  {renderBranches()}
                </RadioGroup>

                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  color="primary"
                >
                  {t("auth.LoginForm.SignIn")}
                </Button>
              </form>
            )}
          />
        </Container>
      </Grid>
    </Grid>
  );
};

export default LoginForm;