@extends('layout.base')

@section('page_content')
    <h1>Registered Mailboxes</h1>
    <div id="mailboxes"></div>
@endsection

@push('page_scripts')
    <script type="text/javascript">
        const mailboxes = {
            div_id: '',
            mailboxes: [],
            get: function() {
                const uri = '/mailboxes/registered'
                this.draw().loading()
                return Send.get(uri).then((response, status, jqXHR) => {
                    if (parseInt(jqXHR.status / 100) !== 2 || jqXHR.status === 204) {
                        this.draw().empty()
                        return
                    }
                    if (jqXHR.status === 200) {
                        this.mailboxes = response.mailboxes
                    }
                    this.draw().list()
                })
            },
            draw: function() {
                return {
                    loading: () => {
                        const parent = $(this.div_id)
                        parent.html('')
                        parent.append(
                            $('<div></div>').addClass('ui segment').append(
                                $('<p></p>').html('&nbsp;')
                            ).append(
                                $('<div></div>').addClass('ui active dimmer').append(
                                    $('<div></div>').addClass('ui indeterminate elastic loader')
                                )
                            ).append(
                                $('<p></p>').html('&nbsp;')
                            )
                        )
                    },
                    list: () => {
                        const parent = $(this.div_id)
                        parent.html('')
                        if (this.mailboxes.length === 0) {
                            this.draw().empty()
                            return
                        }
                        const list = $('<div></div>').addClass('ui list')
                        this.mailboxes.forEach(mb => {
                            list.append(
                                $('<a></a>').addClass('item').attr('href', '{{$urls->base}}/emails/mailbox/' + mb.id).html(mb.name)
                            )
                        })
                        parent.append(list)
                    },
                    empty: () => {
                        const parent = $(this.div_id)
                        parent.html('')
                        parent.append(
                            $('<div></div>').addClass('ui message').html('No mailboxes registered.')
                        )
                    }
                }
            }
        }
        $().ready(() => {
            mailboxes.div_id = '#mailboxes'
            mailboxes.get()
        })
    </script>
@endpush