import React, {useState} from "react";
import {
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Col,
  Form,
  FormGroup,
  Input,
  Label,
  Nav,
  NavItem,
  NavLink,
  TabPane
} from "reactstrap";
import TabContent from "reactstrap/es/TabContent";
import useAuth from "../../Hooks/auth";
import {onEnter} from "../../Helpers/keys";

export default function LoginForm() {
  const {login, register} = useAuth();

  const [tab, setTab] = useState(1);
  const [loginUser, setLoginUser] = useState("");
  const [loginPass, setLoginPass] = useState("");
  const [regUser, setRegUser] = useState("");
  const [regPass1, setRegPass1] = useState("");
  const [regPass2, setRegPass2] = useState("");

  return (
    <Card className="mt-3">
      <CardHeader>Tilgangskontroll</CardHeader>
      <CardBody>
        <Nav tabs>
          <NavItem>
            <NavLink className={tab === 1 ? "active" : ""}
                     onClick={() => setTab(1)}
                     onKeyDown={onEnter(() => setTab(1))}
                     tabIndex={0}
            >
              Innlogging
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink className={tab === 2 ? "active" : ""}
                     onClick={() => setTab(2)}
                     onKeyDown={onEnter(() => setTab(2))}
                     tabIndex={0}
            >
              Registrering
            </NavLink>
          </NavItem>
        </Nav>
        <TabContent activeTab={tab} className="mt-3">
          <TabPane tabId={1}>
            <Form>
              <FormGroup row>
                <Label sm={3} for="input-login-user">Brukernavn</Label>
                <Col sm={9}>
                  <Input type="text"
                         id="input-login-user"
                         value={loginUser}
                         onChange={e => setLoginUser(e.target.value)}
                  />
                </Col>
              </FormGroup>
              <FormGroup row>
                <Label sm={3} for="input-login-password">Passord</Label>
                <Col sm={9}>
                  <Input type="password"
                         id="input-login-password"
                         value={loginPass}
                         onChange={e => setLoginPass(e.target.value)}
                  />
                </Col>
              </FormGroup>
            </Form>
          </TabPane>
          <TabPane tabId={2}>
            <Form>
              <FormGroup row>
                <Label sm={3} for="input-reg-user">Brukernavn</Label>
                <Col sm={9}>
                  <Input type="text"
                         id="input-reg-user"
                         value={regUser}
                         onChange={e => setRegUser(e.target.value)}
                  />
                </Col>
              </FormGroup>
              <FormGroup row>
                <Label sm={3} for="input-reg-password-1">Passord</Label>
                <Col sm={9}>
                  <Input type="password"
                         id="input-reg-password-1"
                         value={regPass1}
                         onChange={e => setRegPass1(e.target.value)}
                  />
                </Col>
              </FormGroup>
              <FormGroup row>
                <Label sm={3} for="input-reg-password-2">Gjenta passord</Label>
                <Col sm={9}>
                  <Input type="password"
                         id="input-reg-password-2"
                         value={regPass2}
                         onChange={e => setRegPass2(e.target.value)}
                  />
                </Col>
              </FormGroup>
            </Form>
          </TabPane>
        </TabContent>
      </CardBody>
      <CardFooter>
        {tab === 1 && <Button color="primary" onClick={() => login(loginUser, loginPass)}>Logg inn</Button>}
        {tab === 2 && (
          <>
            <Button color="primary"
                    onClick={() => register(regUser, regPass1, regPass2)}
            >
              Registrer
            </Button>
            {" "}
            <Button color="secondary"
                    onClick={() => {
                      setRegUser("");
                      setRegPass1("");
                      setRegPass2("");
                      setTab(1);
                    }}>
              Avbryt
            </Button>
          </>
        )}
      </CardFooter>
    </Card>
  );
}