import React from 'react';
import superagent from 'superagent';

import MoviesTVWrapper from './MoviesTVWrapper.jsx';

import {
    Button,
    Message,
    Header} from 'semantic-ui-react'

class InAppPurchases extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            text: ""
        };
    }

    async componentDidMount() {
        return this.refreshData();
    }

    async refreshData() {
        this.setState({ loading: true });
        const res = await superagent.get(`/api/admin/media/rebuild/skus`);
        const res2 = await superagent.get(`/api/admin/media/products/export`).accept('text/tab-separated-values');
        this.setState({ text: res2.text, loading: false });
    }

    async copyToClipboard() {
        navigator.clipboard.writeText(this.state.text);
    }

    render() {
        return (
            <MoviesTVWrapper title="IAP for Oculus Store" loading={this.state.loading}>
                <Message>
                    <Message.Header>To get this data into the Oculus Store:</Message.Header>
                    <Message.Content>
                        <ol>
                            <li>Copy it: <Button icon="clipboard" color="blue" onClick={this.copyToClipboard.bind(this)}>Copy to clipboard! 😮</Button></li>
                            <li><a href="https://dashboard.oculus.com/organization/978047255601619/app-grouping/1090185211164287/iap/" target="_new">Paste it into the "Upload TSV" area here (click to open Oculus store in a new window)...</a></li>
                        </ol>
                    </Message.Content>
                </Message>

                <Header as="h3">Raw data in TSV format:</Header>
                <pre>
                {this.state.text}
                </pre>
            </MoviesTVWrapper>
        );
    }
}

export default InAppPurchases;