import React from 'react';
import superagent from 'superagent';
import { formatDistanceToNowStrict, formatDuration } from "date-fns";
import { formatInTimeZone } from 'date-fns-tz';

import { Table, Button, Label, Segment, Header, Image, Icon } from 'semantic-ui-react'
import { DEFAULT_TIMEZONE } from '../CloudApi/Constants.js';

export default class AccountSearchResultsTable extends React.Component {
    renderRow(account, index) {
        let verificationControl = account.isVerified ? (
            <Label color="green">Email Verified</Label>
        ) : (
            <Label>Not verified</Label>
        );

        let accountStatus = account.status == "Banned" ? (
            <div>
                <Label color="red">Banned</Label>
            </div>
        ) : (
            <Label color="green">Active</Label>
        )

        let avatarUrl = "/images/avatar_b.jpg";
        if (account.oculusProfile && account.oculusProfile.oculusImageURL) {
            avatarUrl = account.oculusProfile.oculusImageURL;
        } else if (account.steamProfile && account.steamProfile.avatarfull) {
            avatarUrl = account.steamProfile.avatarfull;
        }

        let accessPolicyLabels = account.accessPolicies.map((policy) => {
            return (
                <Label key={policy}>{policy}</Label>
            )
        });

        let oculusLabel = account.oculusProfile && <Label color="black"><Icon name="eye" /> {account.oculusProfile.oculusId}</Label>;
        let steamLabel = account.steamProfile && <Label color="teal"><Icon name="steam" /> {account.steamProfile.steamid}</Label>;

        const createdAt = formatInTimeZone(new Date(account.createdAt), DEFAULT_TIMEZONE, 'PPPp z');
        const accountAge = formatDistanceToNowStrict(new Date(account.createdAt), { unit: "day" });

        return (
            <Table.Row key={index}>
                <Table.Cell><Image src={avatarUrl} rounded size="mini" /></Table.Cell>
                <Table.Cell>
                    {accountStatus}
                </Table.Cell>
                <Table.Cell>
                    <a style={{textDecoration: "underline" }} href={`/account/${account.id}`}>{account.username}</a><br />
                    Account Id: {account.id}
                </Table.Cell>
                <Table.Cell>
                    {createdAt}<br />{accountAge} ago
                </Table.Cell>
                <Table.Cell>
                    {oculusLabel} {steamLabel}
                </Table.Cell>
                <Table.Cell>
                    {accessPolicyLabels} {verificationControl}
                </Table.Cell>
            </Table.Row>
        );
    }

    render() {
        // Sort results by createdAt ascending
        if (this.props.results) {
            let results = this.props.results;
            if (results) {
                results = results.sort((a, b) => {
                    return new Date(b.createdAt) - new Date(a.createdAt);
                });
            }
            return (
                <Table celled>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell></Table.HeaderCell>
                            <Table.HeaderCell>Status</Table.HeaderCell>
                            <Table.HeaderCell>Username</Table.HeaderCell>
                            <Table.HeaderCell>Created</Table.HeaderCell>
                            <Table.HeaderCell>Attached Accounts</Table.HeaderCell>
                            <Table.HeaderCell>Info</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>
                    {results.map((account, index) => this.renderRow(account, index))}
                </Table>
            );
        }
    }
}