import React, { useEffect, useState, useContext } from "react";
import app from "firebase/app";
import { Table, Row, Col, DropdownItem } from "reactstrap";
import { withStyles } from "@material-ui/core/styles";
import MDSpinner from "react-md-spinner";
import moment from "moment";
import AccountCircle from "@material-ui/icons/AccountCircle";
import AuthContext from "../../../context/auth-contex";
import { Link } from "react-router-dom";

const styles = {
  card: {
    padding: 20,
    paddingTop: 0,
    paddingRight: 40
  },
  checkout: {
    padding: 20,
    width: "100%",
    minWidth: "300px",
    maxWidth: "600px",
    height: "100%",
    maxHeight: "300px"
  }
};

function AccountContainer(props) {
  const [dataTransaction, setDataTransaction] = useState({
    transactionPending: [],
    courses: [],
    isLoading: true,
    isCheckout: false,
    isExpired: false
  });
  const context = useContext(AuthContext);

  const [user, setUser] = useState({
    photo_url: context.data.photo_url
  });
  const [isLoading, setLoading] = useState(false);
  const [voucher, setVoucher] = useState({
    userVoucher: [],
    allTypeVoucher: []
  });
  useEffect(() => {
    let listVoucher = [];
    let db = app.firestore();

    setLoading(true);

    db.collection("voucher")

      .get()
      .then(function(querySnapshot) {
        setLoading(false);
        querySnapshot.forEach(function(doc) {
          listVoucher.push(doc.data());
        });

        setVoucher({
          ...voucher,
          allTypeVoucher: listVoucher.filter(vc => vc.type === "all"),
          userVoucher: listVoucher.filter(
            elem => elem.user_id === app.auth().currentUser.uid
          )
        });
      });
  }, []);
  if (isLoading) {
    return (
      <div className="bg-light">
        <div className="container py-4">
          <Row style={{ height: "100vh" }}>
            <Col md={12} style={{ marginBottom: 48, marginTop: 24 }}>
              <center>
                <MDSpinner size={48} />
                <h2>Loading...</h2>
              </center>
            </Col>
          </Row>
        </div>
      </div>
    );
  } else {
    console.log(voucher);
    return (
      <div style={{ backgroundColor: "#fff" }}>
        <Row>
          <Col xs="12" sm="4">
            <div style={{ marginLeft: "200px" }}>
              {user.photo_url === null ? (
                <AccountCircle
                  fontSize="large"
                  style={{
                    fontSize: "2em"
                  }}
                />
              ) : (
                <img
                  src={user.photo_url}
                  alt="logo"
                  style={{
                    borderRadius: "50%",
                    width: "96px"
                  }}
                />
              )}
              <br />
              <br />
              <Link to={`/account/profile/${context.user.uid}`}>
                <DropdownItem>
                  <h5 style={{ color: "#2d2d2d" }}>Profil</h5>
                </DropdownItem>
              </Link>
              <Link to={`/account/transaction/${context.user.uid}`}>
                <DropdownItem>
                  <h5 style={{ color: "#2d2d2d" }}>Tagihan</h5>
                </DropdownItem>
              </Link>
              <Link to="/kupon">
                <DropdownItem>
                  <h5 style={{ color: "#2d2d2d" }}>My Kupon</h5>
                </DropdownItem>
              </Link>
            </div>
          </Col>

          <Col xs="12" sm="8" md="6">
            <Table borderless>
              <thead>
                <tr>
                  <th style={{ textAlign: "center" }}>Deskripsi Kupon</th>
                  <th style={{ textAlign: "center" }}>Kode</th>
                  <th style={{ textAlign: "center" }}>Diskon</th>
                  <th style={{ textAlign: "center" }}>StartDate</th>
                  <th style={{ textAlign: "center" }}>EndDate</th>
                  <th style={{ textAlign: "center" }}>Status</th>
                </tr>
              </thead>
              <tbody style={{ fontSize: "13px" }}>
                {voucher.allTypeVoucher.map(voucher => {
                  return (
                    <tr>
                      <th scope="row" style={{ textAlign: "center" }}>
                        {voucher.description}
                      </th>
                      <td style={{ textAlign: "center" }}>{voucher.code}</td>
                      <td style={{ textAlign: "center" }}>{voucher.diskon}</td>
                      <td style={{ textAlign: "center" }}>
                        {voucher.start_date}
                      </td>
                      <td style={{ textAlign: "center" }}>
                        {voucher.end_date}
                      </td>

                      {voucher.status === "active" ? (
                        <td style={{ color: "#12e270", textAlign: "center" }}>
                          Active
                        </td>
                      ) : (
                        <td style={{ color: "red", textAlign: "center" }}>
                          Non Active
                        </td>
                      )}
                    </tr>
                  );
                })}
                {voucher.userVoucher.map(voucher => {
                  return (
                    <tr>
                      <th scope="row" style={{ textAlign: "center" }}>
                        {voucher.description}
                      </th>
                      <td style={{ textAlign: "center" }}>{voucher.code}</td>
                      <td style={{ textAlign: "center" }}>{voucher.diskon}</td>
                      <td style={{ textAlign: "center" }}>
                        {voucher.start_date}
                      </td>
                      <td style={{ textAlign: "center" }}>
                        {voucher.end_date}
                      </td>
                      <td style={{ color: "#12e270", textAlign: "center" }}>
                        {voucher.status === "active"
                          ? "active"
                          : "tidak active"}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </Table>
          </Col>
        </Row>{" "}
      </div>
    );
  }
}
export default withStyles(styles)(AccountContainer);