import React from 'react';
import superagent from 'superagent';

import MenuPageWrapper from '../Wrappers/MenuPageWrapper.jsx';

import EntitlementsList from '../MoviesTV/EntitlementsList.jsx';

import AccountRooms from './components/AccountRooms.jsx';
import AccountAccessPolicies from './components/AccountAccessPolicies.jsx';
import AccountDetails from './components/AccountDetails.jsx';
import AccountDevices from './components/AccountDevices.jsx';
import AccountEntitlements from './components/AccountEntitlements.jsx';
import AccountHeader from './components/AccountHeader.jsx';
import AccountIPs from './components/AccountIPs.jsx';
import AccountLoginHistory from './components/AccountLoginHistory.jsx';
import AccountLogs from './components/AccountLogs.jsx';
import AccountNotes from './components/AccountNotes.jsx';
import AccountDangerZone from './components/AccountDangerZone.jsx';
import AccountReportsList from './components/AccountReportsList.jsx';
import AccountSocial from './components/AccountSocial.jsx';
import AccountBans from './components/AccountBans.jsx';
import AccountBigOrderList from './components/Beyond/AccountBigOrderList.jsx';
import AccountScanRequestList from './components/Beyond/AccountScanRequestList.jsx';
import AccountGDPRScanDeletion from './components/Beyond/AccountGDPRScanDeletion.jsx';
import AccountIPManager from './Components/AccountIPManager.jsx';
import AccountAccessPolicyManager from './Components/AccountAccessPolicyManager.jsx';

import {
    Tab,
    Divider
} from 'semantic-ui-react'

export default class AccountEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            account: null,
            accountNotFound: undefined,
            connections: []
        };
    }

    async componentDidMount() {
        await this.getAccountInfo();
    }

    async getAccountInfo() {
        this.setState({ account: null, reports: null, accountNotFound: undefined });
        try {
            const accountId = this.props.match.params.accountId;
            const res = await superagent.get(`/api/admin/account/${accountId}`).accept('json');
            this.setState({ account: res.body });
        } catch (e) {
            console.log(e);
        }

        try {
            const accountId = this.props.match.params.accountId;
            const res = await superagent.get(`/cloud/admin/account/${accountId}/connections`).accept('json');
            this.setState({ connections: res.body });
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        if (this.state.account) {
            const panes = [
                {
                    menuItem: 'Details', render: () => <Tab.Pane attached={false}>
                        <AccountDetails account={this.state.account} />
                        <Divider hidden />
                        <AccountDangerZone account={this.state.account} />
                    </Tab.Pane>
                },
                {
                    menuItem: 'Access', render: () => <Tab.Pane attached={false}>
                        <AccountAccessPolicyManager
                            accountId={this.state.account.id}
                            accessPolicies={this.state.account.accessPolicies || []}
                            onUpdate={this.getAccountInfo.bind(this)}
                        />
                        <Divider hidden />
                        <AccountIPManager
                            accountId={this.state.account.id}
                            accountStatus={this.state.account.status}
                        />
                    </Tab.Pane>
                },
                { menuItem: 'Social', render: () => <Tab.Pane attached={false}><AccountSocial account={this.state.account} /></Tab.Pane> },
                { menuItem: 'Rooms', render: () => <Tab.Pane attached={false}><AccountRooms account={this.state.account} /></Tab.Pane> },
                { menuItem: 'Big Orders', render: () => <Tab.Pane attached={false}><AccountBigOrderList account={this.state.account} /></Tab.Pane> },
                { menuItem: 'Scan Requests', render: () => <Tab.Pane attached={false}><AccountScanRequestList account={this.state.account} /></Tab.Pane> },
                { menuItem: 'GDPR Scan Deletion', render: () => <Tab.Pane attached={false}><AccountGDPRScanDeletion account={this.state.account} /></Tab.Pane> },
                { menuItem: 'Devices & IPs', render: () => <Tab.Pane attached={false}><AccountDevices account={this.state.account} /><AccountIPs account={this.state.account} /></Tab.Pane> },
                { menuItem: 'Entitlements', render: () => <Tab.Pane attached={false}><AccountEntitlements account={this.state.account} /></Tab.Pane> },
                { menuItem: 'Login History', render: () => <Tab.Pane attached={false}><AccountLoginHistory account={this.state.account} /></Tab.Pane> },
                { menuItem: 'Logs', render: () => <Tab.Pane attached={false}><AccountLogs account={this.state.account} /></Tab.Pane> },
                { menuItem: 'Notes', render: () => <Tab.Pane attached={false}><AccountNotes account={this.state.account} /></Tab.Pane> },
                { menuItem: 'Reports', render: () => <Tab.Pane attached={false}><AccountReportsList account={this.state.account} /></Tab.Pane> },
                { menuItem: `Bans and Restrictions (${this.state.account.banHistory.length})`, render: () => <Tab.Pane attached={false}><AccountBans account={this.state.account} /></Tab.Pane> },
            ];

            const tabs = (
                <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
            );

            return (
                <MenuPageWrapper title="Account Info" menuItems={[]} loading={this.state.loading}>
                    <AccountHeader account={this.state.account} connections={this.state.connections} />
                    {tabs}
                </MenuPageWrapper>
            );

        } else {
            if (this.state.accountNotFound) {
                return (
                    <MenuPageWrapper title="Account Not Found!" menuItems={[]} loading={false} />
                );
            } else {
                return (
                    <MenuPageWrapper title="Account Info" menuItems={[]} loading={true} />
                );
            }
        }
    }
}