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';

class AccountStats extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            stats: null
        };
    }

    async componentDidMount() {
        try {
            const res = await superagent.get(`/api/admin/account/${this.props.account.id}/stats`).accept('json');
            console.log("Stats", res.body);
            this.setState({ stats: res.body });
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        let engagementStats = (this.state.stats) ? (
            <span>{`${Math.floor(this.state.stats.engagementMinutes / 60)} hours, ${this.state.stats.engagementMinutes % 60} minutes`}</span>
        ) : (
            <span><em><Icon loading name='circle notch' />Calculating hours spent...</em></span>
        );

        return (
            <Table padded compact celled definition>
                <Table.Body>
                    <Table.Row>
                        <Table.HeaderCell width={3}>Total time in Bigscreen</Table.HeaderCell>
                        <Table.Cell>{engagementStats}</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        );
    }
}

export default class AccountEditor2 extends React.Component {
    onRemoveSteam(e) {
        alert("Not implemented.");
    }

    render() {
        if (this.props.account) {
            let verificationControl = this.props.account.isVerified ? (
                <Label color="green">YES</Label>
            ) : (
                <Label>Not verified</Label>
            );

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

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

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

            let oculusProfile = this.props.account.oculusProfile ? (
                <Segment>
                    <Header as="h2">Oculus Profile</Header>
                    <p>OculusId: {this.props.account.oculusProfile.oculusId}</p>
                    <Image src={this.props.account.oculusProfile.oculusImageURL} />
                </Segment>
            ) : (
                <Segment>No Oculus Account</Segment>
            )

            let steamProfile = this.props.account.steamProfile ? (
                <Segment>
                    <Header as="h2">Steam Profile</Header>
                    <p>SteamId: {this.props.account.steamProfile.steamid}</p>
                    <p>DisplayName: {this.props.account.steamProfile.personaname}</p>
                    <p>Steam Profile: <a href={this.props.account.steamProfile.profileurl}>{this.props.account.steamProfile.profileurl}</a></p>
                    <Image src={this.props.account.steamProfile.avatarfull} />
                    <Button onClick={this.onRemoveSteam.bind(this)}>Remove Steam</Button>
                </Segment>
            ) : (
                <Segment>No Steam Account</Segment>
            )

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

            return (
                <div>
                    <Table padded compact celled definition>
                        <Table.Body>
                            <Table.Row>
                                <Table.HeaderCell width={3}>Username</Table.HeaderCell>
                                <Table.Cell>{this.props.account.username}</Table.Cell>
                            </Table.Row>
                            <Table.Row>
                                <Table.HeaderCell width={3}>Created</Table.HeaderCell>
                                <Table.Cell>{createdAt}</Table.Cell>
                            </Table.Row>
                            <Table.Row>
                                <Table.HeaderCell width={3}>Account Age</Table.HeaderCell>
                                <Table.Cell>{accountAge}</Table.Cell>
                            </Table.Row>
                            <Table.Row>
                                <Table.HeaderCell width={3}>Access Policies</Table.HeaderCell>
                                <Table.Cell>{accessPolicyLabels}</Table.Cell>
                            </Table.Row>
                            <Table.Row>
                                <Table.HeaderCell width={3}>BigscreenAccountId</Table.HeaderCell>
                                <Table.Cell>{this.props.account.id}</Table.Cell>
                            </Table.Row>
                            {this.props.account.email &&
                                <Table.Row>
                                    <Table.HeaderCell width={3}>Email</Table.HeaderCell>
                                    <Table.Cell>{this.props.account.email}</Table.Cell>
                                </Table.Row>
                            }
                            <Table.Row>
                                <Table.HeaderCell width={3}>Verified?</Table.HeaderCell>
                                <Table.Cell>{verificationControl}</Table.Cell>
                            </Table.Row>
                            <Table.Row>
                                <Table.HeaderCell width={3}>Account Status</Table.HeaderCell>
                                <Table.Cell>{accountStatus}</Table.Cell>
                            </Table.Row>

                            <Table.Row>
                                <Table.HeaderCell width={3}>Oculus</Table.HeaderCell>
                                <Table.Cell>{oculusProfile}</Table.Cell>
                            </Table.Row>

                            <Table.Row>
                                <Table.HeaderCell width={3}>Steam</Table.HeaderCell>
                                <Table.Cell>{steamProfile}</Table.Cell>
                            </Table.Row>
                        </Table.Body>
                    </Table>

                    <Header as="h2">Account Stats</Header>
                    <AccountStats account={this.props.account} />
                </div>
            );
        }
    }
}