import React from 'react';
import superagent from 'superagent';
import {Button, Header, Label, Table, Image} from 'semantic-ui-react';

import EventsWrapper from './EventsWrapper.jsx';
import { DEFAULT_TIMEZONE } from '../CloudApi/Constants.js';

export default class TopicRow extends React.Component {
    constructor(props) {
        super(props);
    }

    async componentDidMount() {
    }

    render() {
        if (!this.props.topic) {
            return <div />;
        }

        const createdAt = formatInTimeZone(fromUnixTime(this.props.topic.createdAt._seconds), DEFAULT_TIMEZONE, 'PPPp z');
        const subscriptionsColor = this.props.topic.subscriptionsCount === 0 ? "orange" : "green";

        return (
            <Table.Row>
                <Table.Cell width={2}>
                    {this.props.topic.title} <Label color={subscriptionsColor}>{this.props.topic.subscriptionsCount} Subscribers</Label>
                </Table.Cell>
                <Table.Cell>
                    {this.props.topic.description}
                </Table.Cell>
                <Table.Cell>
                    {this.props.topic.name} <Button size="tiny" onClick={() => {navigator.clipboard.writeText(this.props.topic.name)}}>Copy</Button>
                </Table.Cell>
                <Table.Cell>
                    {this.props.topic.subscriptionsCount}
                </Table.Cell>
                <Table.Cell>
                    {this.props.topic.status}
                </Table.Cell>
                <Table.Cell>
                    {this.props.topic.id}
                </Table.Cell>
                <Table.Cell>{createdAt}</Table.Cell>
            </Table.Row>
        )
    }
}

class Topics extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            topics: [],
            loading: false
        };
    }

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

    render() {
        return (
            <EventsWrapper title="Topics" loading={this.state.loading}>
                <Button size="tiny" href="/events/topic">Create New Topic</Button>
                <Table compact celled>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell width={2}>Title</Table.HeaderCell>
                            <Table.HeaderCell width={1}>Description</Table.HeaderCell>
                            <Table.HeaderCell width={1}>Name</Table.HeaderCell>
                            <Table.HeaderCell width={1}>Subscribers</Table.HeaderCell>
                            <Table.HeaderCell width={1}>Status</Table.HeaderCell>
                            <Table.HeaderCell width={1}>Topic ID</Table.HeaderCell>
                            <Table.HeaderCell width={1}>Created At</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>
                    
                    <Table.Body>
                    {this.state.topics.map(topic => {
                        return (
                            <TopicRow topic={topic} />
                        );
                    })}
                    </Table.Body>
                </Table>
                <a />
            </EventsWrapper>
        );
    }
}