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

import AccountReport from './components/AccountReport.jsx';
import RoomReport from './components/RoomReport.jsx';

import { Segment } from 'semantic-ui-react'
import AccountsWrapper from './AccountsWrapper.jsx';

const Views = {
    Loading: "Loading",
    AccountReports: "AccountReports",
    AccountReportEditor: "AccountReportEditor",
    RoomReports: "RoomReports",
    RoomReportEditor: "RoomReportEditor"
}

export default class Reports extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            query: null,

            currentAccountReport: null,
            currentRoomReport: null,

            accountReports: [],
            roomReports: [],

            view: Views.Loading,
            
            loading: false
        };
    }

    async componentDidMount() {
        if (this.props.match.params.accountReportId) {
            this.setState({ view: Views.Loading });
            try {
                const response = await superagent.get("/api/admin/account_report/" + this.props.match.params.accountReportId);
                this.setState({ currentAccountReport: response.body, view: Views.AccountReportEditor, loading: false });
            } catch (e) {
                console.log(e);
            }
        } else if (this.props.match.params.roomReportId) {
            this.setState({ view: Views.Loading });
            try {
                const response = await superagent.get("/api/admin/room_report/" + this.props.match.params.roomReportId);
                this.setState({ currentRoomReport: response.body, view: Views.RoomReportEditor, loading: false });
            } catch (e) {
                console.log(e);
            }
        } else if (this.props.view) {
            if (this.props.view === Views.AccountReports) {
                await this.onShowAccountReports();
            } else if (this.props.view === Views.RoomReports) {
                await this.onShowRoomReports();
            } else {
                await this.onShowAccountReports();
            }
        } else {
            await this.onShowAccountReports();
        }
    }

    async onShowAccountReports(e) {
        this.setState({ loading: true, title: "Account Reports" });
        const response = await superagent.get("/api/admin/account_reports");

        console.log(response.body);
        this.setState({ accountReports: response.body, view: Views.AccountReports, loading: false });
    }

    async onShowRoomReports(e) {
        this.setState({ loading: true, title: "Room Reports" });
        const response = await superagent.get("/api/admin/room_reports");
        console.log(response.body);
        this.setState({ roomReports: response.body, view: Views.RoomReports, loading: false });
    }

    renderAccountReports() {
        return (
            <Segment basic>
                {this.state.accountReports.map((report, reportIndex) => {
                    return <AccountReport report={report} reportIndex={reportIndex} />
                })}
            </Segment>
        );
    }

    renderRoomReports() {
        return (
            <Segment basic>
                {this.state.roomReports.map((report, reportIndex) => {
                    return <RoomReport report={report} reportIndex={reportIndex} />
                })}
            </Segment>
        );
    }

    render() {
        return (
            <div>
                <AccountsWrapper title={this.state.title} loading={this.state.loading}>
                    {(this.state.view === Views.AccountReports) && this.renderAccountReports()}
                    {(this.state.view === Views.RoomReports) && this.renderRoomReports()}
                </AccountsWrapper>
            </div>
        );
    }
}