import React from 'react';
import logo from './../../logo.svg';
import './App.css';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import { Button, Paper } from '@material-ui/core';

function App() {
  const client_id = "sau3e70wvs369jw1u25ex8g3cve599"
  const redirect_uri = "https://" + encodeURI(window.location.href.split("/")[2]) + "/twitchadmin"
  const twitchURL = "https://id.twitch.tv/oauth2/authorize?client_id="+ client_id +"&redirect_uri="+ redirect_uri +"&response_type=code&scope=user:read:broadcast"

  return (
    <Container className="App">
      <Paper>
        <img src={logo} className="App-logo" alt="logo" />
        <Typography variant="h4" component="h1" gutterBottom>
          Twitch Sings Tools
        </Typography>
        <Button variant="contained" color="primary" href={twitchURL}>
          Log in with Twitch
        </Button>
        <Typography variant="h5" component="h2" gutterBottom>
          Data about Twitch Sings <b>published</b> performances
        </Typography>
        <Typography component="p" gutterBottom>
          This set of tools uses the standard twitch APIs to create a list of songs you have sung and singers you have sung with. <i>Note</i>: If twitch sings ever changes how they name published performances, this may get harder to do.
        </Typography>
        <Typography variant="h5" component="h2" gutterBottom>
          Some insights
        </Typography>
        <Typography component="p" gutterBottom>
          There's a "top 10 people you sing with" and a "top 10 songs you sing".  There's actually not that much insight that can be drawn other than those without getting people involved :-)
        </Typography>
        <Typography variant="h5" component="h2" gutterBottom>
          CSV Export!
        </Typography>
        <Typography component="p" gutterBottom>
          You can bring the data into Excel, Google Sheets, Libre/OpenOffice, Lotus 1-2-3 or whatever, and analyse/graph to your hearts content!
        </Typography>
        <Typography variant="h5" component="h2" gutterBottom>
          Chatbot
        </Typography>
        <Typography component="p" gutterBottom>
          ...Coming "Soon"(tm)
        </Typography>
      </Paper>
    </Container>
  );
}

export default App;