import React from 'react';
import superagent from 'superagent';
import { fromUnixTime, formatDistanceToNow, format } from "date-fns";
import { formatInTimeZone } from 'date-fns-tz'

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

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

    async componentDidMount() {
        this.setState({ loading: true });
        try {
            const res = await superagent.get(`/api/admin/account/${this.props.account.id}/history`).accept('json');
            const loginHistory = res.body;
            console.log(loginHistory);

            this.setState({ loginHistory });
        } catch (e) {
            console.log(e);
        }
        this.setState({ loading: false });
    }

    render() {
        if (this.state.loading == false && this.state.loginHistory.length == 0) {
            return (
                <Segment basic>No login history for this account. Maybe they never logged in?</Segment>
            )
        }

        const loginHistory = _.orderBy(this.state.loginHistory, ["createdAt.value"], ["desc"]);

        return (
            <Segment basic loading={this.state.loading}>
            <Table celled striped compact>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell width={3} collapsing>Date</Table.HeaderCell>
                        <Table.HeaderCell width={2} collapsing>Device</Table.HeaderCell>
                        <Table.HeaderCell width={2} collapsing>App Version</Table.HeaderCell>
                        <Table.HeaderCell width={2} collapsing>Location</Table.HeaderCell>
                        <Table.HeaderCell collapsing>IP</Table.HeaderCell>
                        <Table.HeaderCell collapsing>Device ID</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {loginHistory.map(loginEntry => {
                        return (
                        <Table.Row>
                            <Table.Cell width={3} collapsing>
                                {(loginEntry.createdAt) ? formatInTimeZone(new Date(loginEntry.createdAt.value), DEFAULT_TIMEZONE, 'PPPp z') : "Error"}
                            </Table.Cell>
                            <Table.Cell width={2}>
                                <Label color="blue" basic>{loginEntry.deviceName || loginEntry.HMD}{(loginEntry.operatingSystem && _.startsWith(loginEntry.operatingSystem, "Android OS 10")) ? " 2" : ""}</Label>
                            </Table.Cell>
                            <Table.Cell width={2}>
                                {loginEntry.version}
                            </Table.Cell>
                            <Table.Cell width={2}>
                                {loginEntry.region} {loginEntry.countryCode}
                            </Table.Cell>

                            <Table.Cell width={2}>
                                <Label color="black" basic>{loginEntry.ip}</Label>
                            </Table.Cell>

                            <Table.Cell>
                                <small>{loginEntry.deviceUniqueIdentifier}</small>
                            </Table.Cell>
                        </Table.Row>
                        )
                    })}

                </Table.Body>
            </Table>
            </Segment>
        );
    }
}