import React, { Component, Fragment } from "react";
import styles from "./styles.css";
import { HashRouter as Router, Link } from "react-router-dom";
import api from "../../../services/api";
import Button from "@material-ui/core/Button";
import PropTypes from "prop-types";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import { withStyles } from "@material-ui/core/styles";

import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

class AddIgAccount extends React.Component {
    constructor(props) {
	super(props)
	this.handleClickOpen = this.handleClickOpen.bind(this)
	this.handleClose = this.handleClose.bind(this)
	this.handleChangeValue = this.handleChangeValue.bind(this)
    }
    state = {
	open: false,
    };

    handleClickOpen = () => {
	this.setState({ open: true });
    };

    handleClose = () => {
	this.setState({ open: false });
    };

    handleChangeValue = (event) => {
	console.log(this.props)
	if (event.target.name === 'ig_username') {
	    this.props.new_username = event.target.value
	} else if (event.target.name === 'ig_password') {
	    // this.setState({
		// // this.props.password: event.target.value
	    // })
	}
    }


    render() {
	return (
	    <div>
		<Button onClick={this.handleClickOpen}>Add Instagram Account</Button>
		<Dialog
		    open={this.state.open}
		    onClose={this.handleClose}
		    aria-labelledby="form-dialog-title">
		    <DialogTitle id="form-dialog-title">Add Instagram Account</DialogTitle>
		    <DialogContent>
			<TextField id="username" name="ig_username" onChange={event => this.handleChangeValue(event)}autoFocus type="text" margin="dense" />
			<TextField id="password" name="ig_password" onChange={event => this.handleChangeValue(event)} type="password" margin="dense" fullWidth />
		    </DialogContent>
		    <DialogActions>
			<Button onClick={this.props.triggerCreateIgAccount} color="primary">
			    Add
			</Button>
			<Button onClick={this.handleClose} color="primary">
			    Cancel
			</Button>
		    </DialogActions>
		</Dialog>
	    </div>
	);
    }
}


export default class InstagramAccounts extends React.Component {
    constructor(props) {
	super(props);
	this.state = {
	    data: [],
	    new_username: [],
	    password: []
	};
	this.loadUsernames = this.loadUsernames.bind(this)
	// this.createIgAccount = this.createIgAccount.bind(this)
    }

    componentDidMount() {
	this.loadUsernames()
	// this.createIgAccount()
    }

    componentWillUnmount() {
	this.loadUsernames()
	// this.createIgAccount()
    }

    loadUsernames = async () => {
	const response = await api.get("/get_usernames");
	this.setState({
	    data: response.data.data
	});
    };

    createIgAccount = async () => {
	console.log('chamou chamou!')
	// console.log(this.state.username)
	// console.log(this.state.password)
	// const response = await api.post('/create_ig_account', {
	//     username: this.state.username,
	//     password: this.state.password
	// })
    }

    render() {
	let rows = this.state.data.map(username => {
	    return <Usernames key={username.id} data={username} />;
	});
	return (
	    <Fragment>
		<div className={styles.sidebar}>
		    <Paper>
			<Table>
			    <TableHead>
				<TableRow>
				    <TableCell>id</TableCell>
				    <TableCell>username</TableCell>
				    <TableCell>created</TableCell>
				</TableRow>
			    </TableHead>
			    <TableBody>{rows}</TableBody>
			</Table>
		    </Paper>
		    <br/>
		    <AddIgAccount triggerCreateIgAccount={this.createIgAccount} new_username={this.new_username} />
		</div>
	    </Fragment>
	);
    }
}

const Usernames = props => {
    return (
	<TableRow>
	    <TableCell>{props.data.id}</TableCell>
	    <TableCell>{props.data.username}</TableCell>
	    <TableCell>{props.data.created}</TableCell>
	</TableRow>
    );
};