import React, { useEffect, useState } from "react";
import { Input } from "../StyledComponent/Index";
import app from "firebase/app";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

function AddVoucher(props) {
  const styles = theme => ({
    container: {
      display: "flex",
      flexWrap: "wrap"
    },
    textField: {
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
      width: 200
    }
  });

  const db = app.firestore();
  const [state, setState] = React.useState({
    code: "",
    diskon: 0,
    status: "active",
    user: "",
    user_id: "",
    type: "",
    type_diskon: "",
    start_date: "",
    end_date: ""
  });
  const [voucher, setVoucher] = useState({
    user_id: []
  });
  const handleChange = e => {
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
  };
  const handleSubmit = e => {
    console.log(state);
    e.preventDefault();
    db.collection("voucher")
      .add({
        ...state
      })
      .then(function(docRef) {
        setState({
          code: "",
          diskon: 0,
          status: null
        });
        alert("success");
      })
      .catch(function(error) {
        console.error("Error adding document: ", error);
      });
  };

  useEffect(() => {
    db.collection("users")
      .get()
      .then(function(querySnapshot) {
        let data = [];
        querySnapshot.forEach(function(doc) {
          // doc.data() is never undefined for query doc snapshots
          let obj = {
            user_id: doc.id,
            name: doc.data().name
          };
          data.push(obj);
          console.log(doc.id, " => ", doc.data());
        });
        setVoucher({
          user_id: data
        });
      });
  }, []);

  const { classes } = props;
  return (
    console.log(voucher.user_id),
    (
      <div>
        <form
          onChange={e => {
            handleChange(e);
            console.log(state);
          }}
        >
          <label>Kode Voucher</label>
          <Input
            name="code"
            type="text"
            placeholder="masukan Kode Voucher"
            value={state.code}
          />
          <label>Users</label>
          <Input name="user" type="text" placeholder="masukan nama User" />
          <select
            onChange={e => setState({ ...state, user_id: e.target.value })}
            name="user_id"
            value={state.user_id}
            id="user_id"
          >
            <option value="">nama user</option>
            {voucher &&
              voucher.user_id.map(user => {
                return <option value={user.user_id}>{user.name}</option>;
              })}
          </select>
          <ul style={{ fontSize: "smaller" }}>
            <li>
              Untuk nama user itu adalah nama yang ingin kita kasih kupon misal
              "praditya"
            </li>
            <li>
              Untuk select adalah id yang sama user login jika berbeda kupon
              tidak muncul
            </li>
          </ul>
          <Input
            name="user"
            type="text"
            placeholder="masukan type all/private"
          />
          <select
            name="type"
            value={state.type}
            onChange={e => setState({ ...state, type: e.target.value })}
          >
            <option value="">pilih type user</option>
            <option value="all">All</option>
            <option value="private">Private</option>
          </select>
          <ul style={{ fontSize: "smaller" }}>
            <li>
              Untuk type user adalah voucher untuk memilih yang bersifat All
              atau Private
            </li>
            <li>
              jika memilih All tidak perlu memberikan user id, tapi kalo Private
              wajib memberikan
            </li>
          </ul>
          <label>Description</label>
          <Input
            name="description"
            type="text"
            placeholder="masukan description"
          />
          <label>Diskon</label>
          <Input
            name="diskon"
            type="number"
            placeholder="masukan nominal voucher"
            value={state.diskon}
            onChange={e => {
              setState({
                ...state,
                diskon: parseInt(e.target.value)
              });
            }}
          />
          <form
            style={{ marginTop: "15px" }}
            className={classes.container}
            noValidate
          >
            <TextField
              name="start_date"
              label="StartDate"
              type="date"
              className={classes.textField}
              InputLabelProps={{
                shrink: true
              }}
              onChange={e => setState({ ...state, start_date: e.target.value })}
            />
          </form>
          <form className={classes.container} noValidate>
            <TextField
              name="end_date"
              label="EndDate"
              type="date"
              className={classes.textField}
              InputLabelProps={{
                shrink: true
              }}
              onChange={e => {
                console.log(e.target.value);
                setState({ ...state, end_date: e.target.value });
              }}
            />
          </form>
          <select
            style={{ marginTop: "20px" }}
            onChange={e =>
              setState({
                ...state,
                type_diskon: e.target.value
              })
            }
            name="type_diskon"
            id="type_diskon"
          >
            {" "}
            <option value="">Pilih Type Diskon</option>
            <option value="presentase">Presentase</option>
            <option value="rupiah">Rupiah</option>
          </select>{" "}
          {""}
          <button type="submit" onClick={e => handleSubmit(e)}>
            Submit Voucher
          </button>
        </form>
      </div>
    )
  );
}

export default withStyles()(AddVoucher);