import React from 'react';
import superagent from 'superagent';
import BigOrdersWrapper from './BigOrdersWrapper.jsx';

import { Segment, Table, Header, Label } from 'semantic-ui-react'

export default class ShopifyWebhooks extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            webhooks: []
        };
    }

    async componentDidMount() {
        this.setState({ loading: true });
        
        try {
            const res = await superagent.get('/api/admin/shop/webhooks').accept('json');
            this.setState({ webhooks: res.body, loading: false });

            console.log(res.text);
        } catch (error) {
            console.error('Failed to fetch webhooks:', error);
            this.setState({ webhooks: [], loading: false });
        }
    }

    formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleString();
    }

    render() {
        const { webhooks, loading } = this.state;
        const webhookList = webhooks || [];

        return (
            <BigOrdersWrapper title="Webhook Log" loading={loading}>
                <Segment basic loading={loading}>
                    {webhookList.length === 0 && !loading ? (
                        <p>No webhooks found.</p>
                    ) : (
                        <>
                            <Header as="h3">Shopify Webhooks ({webhookList.length})</Header>
                            <Table celled striped>
                                <Table.Header>
                                    <Table.Row>
                                        <Table.HeaderCell>Topic</Table.HeaderCell>
                                        <Table.HeaderCell>Shopify ID</Table.HeaderCell>
                                        <Table.HeaderCell>Received At</Table.HeaderCell>
                                        <Table.HeaderCell>GraphQL ID</Table.HeaderCell>
                                    </Table.Row>
                                </Table.Header>
                                <Table.Body>
                                    {webhookList.map((webhook, index) => (
                                        <Table.Row key={webhook.id || index}>
                                            <Table.Cell>
                                                <Label color="blue">{webhook.topic}</Label>
                                            </Table.Cell>
                                            <Table.Cell>{webhook.shopifyId}</Table.Cell>
                                            <Table.Cell>{this.formatDate(webhook.receivedAt)}</Table.Cell>
                                            <Table.Cell style={{fontFamily: 'monospace', fontSize: '0.8em'}}>
                                                {webhook.graphQLId}
                                            </Table.Cell>
                                        </Table.Row>
                                    ))}
                                </Table.Body>
                            </Table>
                        </>
                    )}
                </Segment>
            </BigOrdersWrapper>
        );
    }
}