// Provider
export const ExpensesContext = React.createContext();

export class ExpensesPage extends Component {
    constructor() {
        super();

        this.auth = new AuthenticationService();
        this.expensesService = new ExpensesService(this.auth);
        this.formatter = new CommonFormatter();

        this.state = {
            expenses: null,
            isLoading: true
        };
    }

    componentDidMount() {
        this.fetchExpenses();
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.isLoading !== this.state.isLoading) {
            this.fetchExpenses();
        }
    }

    handleButtonClick = (e) => {
        let selectedAction = e.target.innerHTML.replace(/<(?:.|\n)*?>/gm, '').trim();
        let selectedExpenseId = e.target.value;

        let selectedExpense = this.state.expenses.find(e => e.expenseId === parseInt(selectedExpenseId));

        switch (selectedAction) {
            case "Delete":
                this.deleteExpense(selectedExpense);
                break;
        }

    }

    reload = () => {
        this.setState({
            isLoading: true
        });
    }

    fetchExpenses = () => {
        this.expensesService.getExpenses()
            .then(response => {
                this.setState({
                    expenses: response,
                    isLoading: false
                });
                console.log(this.state);
            });
    }

    deleteExpense = (expense) => {
        confirmAlert({
            title: 'Confirm expense delete',
            message: 'Are you sure to expense from ' + expense.date + '?',
            buttons: [
                {
                    label: 'Yes',
                    onClick: () => {
                        this.expensesService.deleteExpense(expense.expenseId).then(() => {
                            this.reload();
                        });
                        toastr.success("Expense deleted!");
                    }
                },
                {
                    label: 'No',
                }
            ]
        });
    }

    render() {
        if (this.state.isLoading) {
            return <p>Loading...</p>;
        }

        return (
            <div>
                <h2>Expenses</h2>

                <ExpensesContext.Provider value={{
                    expenses: this.state.expenses,
                    handleButtonClick: this.handleButtonClick,
                }}
                >
                    <ExpensesDetails />
                </ExpensesContext.Provider>

            </div>
        );
    }
}

// Consumer
export class ExpensesDetails extends Component {
    constructor(props) {
        super(props);

        this.formatter = new CommonFormatter();
    }

    render() {
        const columns = [
            {
                Header: 'Date',
                accessor: 'date',
                minWidth: 50,
                Cell: props => this.formatter.formatDate(props.value)
            },
            {
                Header: 'Type',
                accessor: 'type',
                minWidth: 50,
                Cell: props => this.formatter.formatExpenseType(props.value)
            },
            {
                Header: 'Count',
                accessor: 'count',
                minWidth: 20
            },
            {
                Header: 'Price',
                accessor: 'price',
                minWidth: 40
            },
            {
                Header: 'Details',
                accessor: 'details',
                Cell: props => this.formatter.formatEmptyOrNull(props.value),
                minWidth: 120
            },
            {
                Header: 'Odometer',
                accessor: 'mileage',
                Cell: props => this.formatter.formatEmptyOrNull(props.value) + " km",
                minWidth: 80
            },
            {
                Header: '',
                accessor: 'expenseId',
                Cell: props => <Button onClick={this.context.handleButtonClick} bsStyle="warning" bsSize="xsmall" value={props.value}>Edit</Button>,
                sortable: false,
                resizable: false,
                minWidth: 30
            },
            {
                Header: '',
                accessor: 'expenseId',
                Cell: props => <Button onClick={this.context.handleButtonClick} bsStyle="danger" bsSize="xsmall" value={props.value}>Delete</Button>,
                sortable: false,
                resizable: false,
                minWidth: 30
            }
        ];

        return (
            <ReactTable data={this.context.expenses} columns={columns} defaultPageSize={10} defaultSorted={[{ id: "date", desc: true }]} />
        );
    }
}
ExpensesDetails.contextType = ExpensesContext;