import React from "react";
import { Grid, Card } from "material-ui";
import PropTypes from 'prop-types';
import { RegularCard, Button, Table, CustomInput, ItemGrid } from "components";
import { CardContent, Typography } from "material-ui";
import { withStyles } from "material-ui";
import { Add, SettingsBackupRestore } from "material-ui-icons";
import "../../variables/css/transactionStyle.css";
import axios from 'axios';

const useStyles = theme => ({
  marginColor: {
    color: '#0080FF',
    fontWeight: 'bold'
  },
  marginTitle: {
    float: 'center',
  },
  addFunds: {
    background: '#00FF00',
  },
  withdraw: {
    background: 'FF0000',
  }
});

class Transaction extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      rows: []
    }
  }

  resolveRequests = (data) => {
    var proxy = ""
    if(process.env.NODE_ENV === "production")
      proxy = "https://crypto-manager-prod.herokuapp.com"

    let dailyDataRequest = new FormData();
          dailyDataRequest.set('tick', data['tick']);
          dailyDataRequest.set('limit', 1);
          dailyDataRequest.set('currency', 'USD');

          return new Promise((resolve, reject) => {
            axios.post(
              proxy + '/crypto/data/daily',
              dailyDataRequest
            )
            .then(resp => {
              let todayClose = resp.data.Data[1]['close'];
              let todayOpen = resp.data.Data[1]['open'];
              let currentValue = data['quantity'] * todayClose;
              let todayChange = ((todayClose - todayOpen) / todayOpen) * 100;
              let overallChange = ((todayClose - data['price']) / data['price']) * 100;

              this.setState((prevState, props) => {
                const row = {
                  tick: data['tick'],
                  name: data['name'],
                  price: data['price'],
                  investmentPrice: data['investmentPrice'],
                  quantity: data['quantity'],
                  currentValue: currentValue.toFixed(2),
                  todayChange: todayChange.toFixed(2),
                  overallChange: overallChange.toFixed(2) };

                return { rows: [...prevState.rows, row] };
              });

              resolve(resp);
            })
            .catch(error => console.log(error))
          })
   }

  componentDidMount() {
    var proxy = ""
      if(process.env.NODE_ENV === "production")
        proxy = "https://crypto-manager-prod.herokuapp.com"

    var userData = localStorage.getItem('user');
    const email = JSON.parse(userData)['email'];
    const aadharNo = JSON.parse(userData)['aadhar_card_no'];
    const panNo = JSON.parse(userData)['pan_card_no'];

    let data = new FormData();
    data.set('email', email);
    data.set('aadhar_card_no', aadharNo);
    data.set('pan_card_no', panNo);

    axios.post(
      proxy + '/user/portfolio/get',
      data
    )
    .then(res => {
      try {
        var promises = [];
        res.data.map((data, i) => {
          promises.push(this.resolveRequests(data));
        })

        Promise.all(promises).then(() => {
          // console.log("Finished");
        })
      } catch (err) {
        // pass
      }
    })
  }

  render() {
  const { classes } = this.props;

    return (
      <div>
        <div className="local-bootstrap">
        <Grid container>
            <ItemGrid xs={12} sm={12} md={12}>

              <Card className="fundsMain">
                <Grid container>
                  <ItemGrid xs={12} sm={4} >
                    <CardContent>
                      <Typography component="h6" variant="subtitle1" className={classes.marginTitle} align="center"> Margin Available </Typography>
                      <Typography component="h2" variant="h1" className={classes.marginColor} align="center">$ 5000.50 </Typography>
                    </CardContent>
                  </ItemGrid>

                  <ItemGrid xs={12} sm={4} >
                    <CardContent>
                      <Typography component="h6" variant="subtitle1" className={classes.marginTitle} align="center"> Margin Used </Typography>
                      <Typography component="h2" variant="h1" className={classes.marginColor} align="center">$ 0.0 </Typography>
                    </CardContent>
                  </ItemGrid>

                  <ItemGrid xs={12} sm={4} >
                    <CardContent>
                      <Typography component="h6" variant="subtitle1" className={classes.marginTitle} align="center"> Opening Balance </Typography>
                      <Typography component="h2" variant="h1" className={classes.marginColor} align="center">$ 5000.50 </Typography>
                    </CardContent>
                  </ItemGrid>
                </Grid>

                <CardContent>
                  <div className="addWithdrawButtons">
                    <div className="addFunds">
                      <Button
                        variant="contained"
                        style={{
                          borderRadius: 5,
                          backgroundColor: "#0080FF",
                          padding: "15px 30px",
                          fontSize: "18px"
                      }}
                        startIcon={<Add />}
                        color="primary"
                      >
                        Add Funds
                      </Button>
                    </div>

                    <div className="withdrawFunds">
                      <Button
                        variant="contained"
                        style={{
                          borderRadius: 5,
                          backgroundColor: "#FF2400",
                          padding: "15px 30px",
                          fontSize: "18px"
                      }}
                        startIcon={<SettingsBackupRestore />}
                        color="secondary"
                      >
                        Withdraw
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>

            </ItemGrid>

            <ItemGrid xs={12} sm={12} md={12}>
      <div className="watchList">
        <Card className="watchListChart">
          <CardContent>
            <Typography component="h3" variant="h1">Current Holdings</Typography>
          </CardContent>

          <CardContent>
            <div className="local-bootstrap">

            <div className="container">
            <div className="searchFilters">
                <div className="searchWatchList">
                  <div className="input-group mb-3">
                    <div className="input-group-prepend">
                      <span className="input-group-text" id="basic-addon1">Search</span>
                    </div>
                    <input type="text" className="form-control" placeholder="Filter Holdings" aria-label="Search" aria-describedby="basic-addon1"/>
                  </div>
                </div>

              </div>

              <table className="table">
                <thead className='thead-dark'>
                  <tr>
                    <th scope="col">Tick</th>
                    <th scope="col">Name</th>
                    <th scope="col">Buy Price</th>
                    <th scope="col">Invested</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Current Value</th>
                    <th scope="col">% Change (24 hrs)</th>
                    <th scope="col">% Change (Overall)</th>
                  </tr>
                </thead>
                <tbody>
                  { this.state.rows.map(row => (
                    <tr>
                      <td className="holdingsRow">{row.tick}</td>
                      <td className="holdingsRow">{row.name}</td>
                      <td className="holdingsRow">{row.price}</td>
                      <td className="holdingsRow">{row.investmentPrice}</td>
                      <td className="holdingsRow">{row.quantity}</td>
                      <td className={row.overallChange > 0 ? 'bullishTrend' : (row.overallChange < 0 ? 'bearishTrend' : 'holdingsRow')}>{row.currentValue}</td>
                      <td className={row.todayChange > 0 ? 'bullishTrend' : (row.todayChange < 0 ? 'bearishTrend' : 'holdingsRow')}>{row.todayChange + " %"}</td>
                      <td className={row.overallChange > 0 ? 'bullishTrend' : (row.overallChange < 0 ? 'bearishTrend' : 'holdingsRow')}>{row.overallChange + " %"}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
            </ItemGrid>
        </Grid>
        </div>
      </div>
    );
  }
}

Transaction.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(useStyles)(Transaction);