import { Component, h, Event, EventEmitter, State, Prop, Element, Watch } from '@stencil/core'

export type ExportOptions = {
    filename: string
    shareLabel: string
}

export type Export = {
    options: ExportOptions
    historyItemIds: string[]
}

@Component({
    tag: 'gd-user-dashboard-export-dialog',
    styleUrl: 'gd-user-dashboard-export-dialog.scss',
    shadow: true,
})
export class GdUserDashboardExportDialog {
    
    /**
     * the history items to export
     */
    @Prop() historyItemIds: string[] = []
    
    /**
     * when to show the dialog
     */
    @Prop() show: boolean = false

    /**
     * if the share as url functionality should be available or not
     */
    @Prop() canShareAsUrl: boolean = true

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

    /**
     * event emitted to export items
     */
    @Event() export: EventEmitter<Export>

    /**
     * a set of options that will be used to export the history items
     */
    @State() exportOptions: ExportOptions

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

    @State() showErrors: boolean = false

    @Element() el: HTMLElement

    @Watch('show')
    setExportOptions() {
        if (this.show) {
            this.exportOptions = { filename: 'export', shareLabel: '' }
        }
    }

    handleChange(event) {
        this.exportOptions[event.detail.target.name] = event.detail.target.value
    }

    handleClose() {
        if (this.exporting) return
        this.showErrors = false

        // @ts-ignore
        this.el.shadowRoot.querySelector('bs-modal').closeDialog()
    }

    exportItems() {
        this.showErrors = true

        if (!this.exportOptions?.filename) return

        this.exporting = true

        this.export.emit({
            options: this.exportOptions,
            historyItemIds: this.historyItemIds,
        })

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

    /**
     * renders the dialog
     */
    render() {
        return (
            <bs-modal show={this.show} onClose={() => this.closed.emit()}>
                <bs-modal-header modal-title={`<bs-icon size="20" class="mr-2" icon="fab fa-file-export"></bs-icon> Export ${this.historyItemIds.length} Items`} />

                <bs-modal-body>
                    <bs-form-row>
                        <bs-form-group>
                            <bs-form-label>Share Label</bs-form-label>

                            <bs-form-control
                                control-id="shareLabel"
                                as="input"
                                name="shareLabel"
                                type="text"
                                value={this.exportOptions?.filename}
                                required
                                onBsInput={this.handleChange.bind(this)}
                                is-invalid={this.showErrors && !this.exportOptions?.filename}
                            />
                        </bs-form-group>
                    </bs-form-row>

                    {/*
                    <bs-form-row>
                        <bs-form-group>
                            <bs-form-check-group onBsChange={(e) => console.log(e)}>
                                <bs-form-check control-id="radio-1" name="exampleRadios" type="radio" value="bob"> Bob Radio </bs-form-check>
                                <bs-form-check control-id="radio-2" name="exampleRadios" type="radio" value="max"> Max Radio 2 </bs-form-check>
                                <bs-form-check control-id="radio-3" name="exampleRadios" type="radio" value="smith"> Smith Radio 3 </bs-form-check>
                            </bs-form-check-group>
                        </bs-form-group>
                    </bs-form-row>
                    */}
                    
                    <bs-form-row>
                        <bs-form-group>
                            <bs-form-label>Filename</bs-form-label>

                            <bs-form-control
                                control-id="filename"
                                as="input"
                                name="filename"
                                type="text"
                                value={this.exportOptions?.shareLabel}
                                onBsInput={this.handleChange.bind(this)}
                            />

                            {(this.showErrors && !this.exportOptions?.filename) && <div class="text-danger">Filename required</div>}
                        </bs-form-group>
                    </bs-form-row>
                </bs-modal-body>

                <bs-modal-footer>
                    <bs-button variant="secondary" onClick={this.handleClose.bind(this)} disabled={this.exporting}>
                        Cancel
                    </bs-button>

                    {this.exporting ? (
                        <bs-button variant="primary" disabled>
                            <bs-spinner aria-hidden="true" size="sm"></bs-spinner>
                            <span class="ml-2">Exporting...</span>
                        </bs-button>
                    ) : (
                        <bs-button variant="primary" onClick={this.exportItems.bind(this)}>
                            Export
                        </bs-button>
                    )}
                </bs-modal-footer>
            </bs-modal>
        )
    }
}
