import { Component, h, Event, EventEmitter, State, Prop, Element, Watch } from '@stencil/core'
import { HistoryItem } from '../gd-user-dashboard-list-item/user-dashboard-list-item'
import { Datalist } from '../gd-user-dashboard/gd-user-dashboard'

@Component({
    tag: 'gd-user-dashboard-import-datalist-dialog',
    styleUrl: 'gd-user-dashboard-import-datalist-dialog.scss',
    shadow: true,
})
export class GdUserDashboardImportDatalistDialog {
    /**
     * when to show the dialog
     */
    @Prop() show: boolean = false

    /**
     * the datalist to import history items from
     */
    @Prop() datalist: Datalist

    /**
     * event emitted when the dialog is closed
     */
    @Event() closed: EventEmitter<void>

    /**
     * event emitted to import items
     */
    @Event() import: EventEmitter<Array<HistoryItem>>

    /**
     * a visual state to show loading in the import button
     */
    @State() importing: boolean = false

    /**
     * whether the datalist is valid or not (has history items)
     */
    @State() invalid: boolean = false

    @Element() el: HTMLElement

    componentDidLoad() {
        this.validateDatalist()
    }

    /**
     * anytime a new datalist is passed in, validate it and show errors if needed
     */
    @Watch('datalist')
    validateDatalist() {
        if (!this.datalist?.historyItems?.length) {
            this.invalid = true
        } else {
            this.invalid = false
        }
    }

    handleClose() {
        if (this.importing) return
        this.invalid = false
        this.el.shadowRoot.querySelector('bs-modal').closeDialog()
    }

    importItems() {
        if (!this.datalist?.historyItems?.length) return

        this.importing = true
        this.import.emit(this.datalist.historyItems)

        // visually wait a bit before closing
        setTimeout(() => {
            this.importing = false
            this.handleClose()
        }, 1000)
    }

    /**
     * renders the dialog
     */
    render() {
        return (
            <bs-modal static={true} scrollable={true} show={this.show} onClose={() => this.closed.emit()}>
                <bs-modal-header modal-title={`<bs-icon size="20" class="mr-2" icon="fab fa-file-import"></bs-icon> Add Shared Items To Your Dashboard`} />

                <bs-modal-body>
                    {this.datalist?.historyItems?.length && (
                        <div>
                            <p>{this.datalist.description}</p>

                            <bs-list-group>
                                {this.datalist?.historyItems?.map(historyItem => (
                                    <bs-list-group-item>{historyItem.label || historyItem.url}</bs-list-group-item>
                                ))}
                            </bs-list-group>
                        </div>
                    )}

                    {this.invalid && (
                        <div class="text-danger">
                            <p>Sorry, the requested datalist was not found.</p>
                            <p>Please notify the user that provided you with this link.</p>
                        </div>
                    )}
                </bs-modal-body>

                <bs-modal-footer>
                    <bs-button variant="secondary" onClick={this.handleClose.bind(this)} disabled={this.importing}>
                        {this.invalid ? 'Close' : 'Cancel'}
                    </bs-button>

                    {!this.invalid && (
                        this.importing ? (
                            <bs-button variant="primary" disabled>
                                <bs-spinner aria-hidden="true" size="sm"></bs-spinner>
                                <span class="ml-2">Adding...</span>
                            </bs-button>
                        ) : (
                            <bs-button variant="primary" onClick={this.importItems.bind(this)} disabled={!this.datalist?.historyItems?.length}>
                                Add Items
                            </bs-button>
                        )
                    )}
                </bs-modal-footer>
            </bs-modal>
        )
    }
}
