import React, { useState, useEffect } from "react";
import './App.css';

class Card extends React.Component{
  state = {
    data: {}
  }

  constructor(props) {
    super(props);
    this.state.data = props;
  }

  render() {
    return (
      <div className="card">
      <h4><b>{this.state.data.Username}</b></h4>
        <div className="container">
          <p>{this.state.data.Closed}</p>
          <p>{this.state.data.UserID}</p>
          <p><a href={this.state.data.Photo}>Verification Photo</a></p>
        </div>
      </div>
    );
}
}

  function CardImg(data) {
    return (
      <div className="card-img">
      <h4><b>Pend: {data.Username}</b></h4>
      <img src={data.Photo !== undefined ? data.Photo : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
        <div className="container">
          <p>{data.UserID}</p>
        </div>
      </div>
    )
  }
/*
function UserDetail(userID, verification) {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch(
      `https://thanos.nightmare.haus/api/user?userID=${userID}`
    )
      .then(res => res.json())
      .then(response => {
        setData(response);
      })
      .catch(error => console.log(error));
  });

  return (
    <div className="card">
    <h4><b>{data.Nick}</b></h4>
    <img src={verification !== undefined ? verification : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
      <div className="container">
      <img src={data.user.avatar !== undefined ? `https://cdn.discordapp.com/avatars/${userID}/${data.user.avatar}.png` : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
   
        <p>{data.joined_at}</p>
        <p>{data.user.id}</p>
      </div>
    </div>
  )
}
*/
class Pending extends React.Component {
    state = {
        pending: []
    }
    componentDidMount() {
        const apiUrl = 'https://thanos.nightmare.haus/api/pending';
        fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => this.setState({pending: Object.values(data)}));
    }
    render() {
        return (
           <div className="App">
               <ul>
                   {this.state.pending.map((data, i) => (
                        <li key={i}> <CardImg {...data} /></li>
                   ))}
               </ul>
               <br></br>
           </div>
        );
    }
}



class Verification extends React.Component {
    state = {
        verifications: []
    }
    componentDidMount() {
        const apiUrl = 'https://thanos.nightmare.haus/api/verifications';
        fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => this.setState({verifications: data}));
    }

    render() {
        return (
           <div className="App">
             <Pending />
               <ul>
                   {this.state.verifications.map((data, i) => (
                       <li key={i}> <Card {...data} /></li>
                   ))}
               </ul>
           </div>
        );
    }
}

export {
    Pending,
    Verification,
}

export default Verification;