import { Link } from "react-router-dom";
import { useDispatch } from "react-redux";
import { registerOwner } from "../../store/auth-action";

import React, { useState } from "react";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import MLink from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {"Copyright © "}
      <MLink color="inherit" href="https://material-ui.com/">
        Your Website
      </MLink>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}
const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: "100%", // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

function Register() {
  const dispatch = useDispatch();
  const classes = useStyles();
  const [Email, setEmail] = useState("");
  const [Username, setUsername] = useState("");
  const [Password, setPassword] = useState("");
  const [MobileNumber, setMobileNumber] = useState("");
  const [OwnerName, setOwnerName] = useState("");

  const handleSubmit = (e: any) => {
    // your submit logic
    e.preventDefault();
    console.log(Email, Password, Username, MobileNumber, OwnerName);
    dispatch(registerOwner(Email, Username, Password, MobileNumber, OwnerName));
  };
  const emailChange = (e: any) => {
    setEmail(e.target.value);
  };
  const usernameChange = (e: any) => {
    setUsername(e.target.value);
  };
  const passwordChange = (e: any) => {
    setPassword(e.target.value);
  };
  const mobileNumberChange = (e: any) => {
    setMobileNumber(e.target.value);
  };
  const ownerNameChange = (e: any) => {
    setOwnerName(e.target.value);
  };
  return (
    <div>
      {/* <h1> Owner Register </h1>
      <button onClick={}>Register User</button> */}
      <div
        style={{
          background: "white",
          width: "600px",
          margin: "auto auto",
          borderRadius: "15px",
          left: "50%",
        }}
      >
        <Container component="main" maxWidth="xs">
          <CssBaseline />
          <div className={classes.paper} style={{ padding: "20px 0px" }}>
            <Avatar className={classes.avatar}>
              <LockOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              Sign in
            </Typography>
            <form className={classes.form}>
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
                value={Email}
                onChange={emailChange}
                autoFocus
              />
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="current-password"
                value={Password}
                onChange={passwordChange}
              />
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                name="username"
                label="username"
                type="text"
                id="username"
                value={Username}
                onChange={usernameChange}
              />
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                name="mobileNumber"
                label="mobileNumber"
                type="text"
                id="mobileNumber"
                value={MobileNumber}
                onChange={mobileNumberChange}
              />
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                name="ownerName"
                label="Your Name"
                type="text"
                id="ownerName"
                value={OwnerName}
                onChange={ownerNameChange}
              />
              <FormControlLabel
                control={<Checkbox value="remember" color="primary" />}
                label="Remember me"
              />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
                className={classes.submit}
                onClick={handleSubmit}
              >
                Register
              </Button>
              <Grid container>
                <Grid item xs>
                  <MLink href="#" variant="body2">
                    Forgot password?
                  </MLink>
                </Grid>
                <Grid item>
                  <Link to="/login">{"have an account? Sign In"}</Link>
                </Grid>
              </Grid>
            </form>
          </div>
          <Box mt={1}>
            <Copyright />
          </Box>
        </Container>
      </div>
    </div>
  );
}

export default Register;