import React from "react";
import { ConnectedRouter } from "connected-react-router";
import { Provider } from "react-redux";
import Routes from "Core/routes";
import "./root.css";

import Appbar from "Components/Appbar";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import blue from "@material-ui/core/colors/blue";
import {
  readConfigRequest,
  readConfigResponse,
  writeConfigRequest,
  useConfigInMainRequest,
} from "secure-electron-store";
import axios from "axios";

const colors = createMuiTheme({
  palette: {
    primary: {
      main: blue[700],
    },
  },
});

const headers = {
  "Access-Control-Allow-Origin": "http://localhost:40992",
  "Content-Type": "application/json",
  "Access-Control-Allow-Methods": "GET",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
  "X-Requested-With": "XMLHttpRequest",
};
class Root extends React.Component {
  componentDidMount() {
    window.api.store.clearRendererBindings();
    window.api.store.send(useConfigInMainRequest);

    window.api.store.onReceive(readConfigResponse, function (args) {
      if (args.success) {
        const inventory = window.api.store.initial()["inventoryItems"];

        let updates = inventory.map((item) => {
          return new Promise((resolve) => {
            if (item.siteLinks.stockX.urlKey) {
              axios(
                `https://stockx.com/api/products/${item.siteLinks.stockX.urlKey}?includes=market`,
                {
                  method: "GET",
                  headers: headers,
                }
              ).then((res) => {
                let match = Object.keys(res.data.Product.children).filter(
                  (prodId) => {
                    return (
                      parseFloat(res.data.Product.children[prodId].shoeSize) ==
                      parseFloat(item.size)
                    );
                  }
                );
                resolve({
                  ...item,
                  marketPrices: {
                    ...item.marketPrices,
                    stockX: {
                      lowestAsk:
                        res.data.Product.children[match[0]].market
                          .lowestAskFloat,
                      highestBid:
                        res.data.Product.children[match[0]].market
                          .highestBidFloat,
                    },
                  },
                });
              });
            }
          });
        });

        Promise.all(updates).then((updatedItems) => {
          window.api.store.send(
            writeConfigRequest,
            "inventoryItems",
            updatedItems
          );
        });
      }
    });

    window.api.store.send(readConfigRequest, "inventoryItems");
  }

  render() {
    const { store, history } = this.props;

    return (
      <React.Fragment>
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <ThemeProvider theme={colors}>
              <Appbar history={history}>
                <Routes></Routes>
              </Appbar>
            </ThemeProvider>
          </ConnectedRouter>
        </Provider>
      </React.Fragment>
    );
  }
}

export default Root;