import { html, css, LitElement, PropertyValues, nothing } from 'lit'
import { repeat } from 'lit/directives/repeat.js'
import { keyed } from 'lit/directives/keyed.js'
import { property, state, customElement, query } from 'lit/decorators.js'
import { InputData } from './definition-schema.js'

import '@material/web/fab/fab.js'
import '@material/web/icon/icon.js'
import '@material/web/dialog/dialog.js'

import '@material/web/button/text-button.js'
import '@material/web/button/outlined-button.js'
import '@material/web/button/filled-button.js'
import '@material/web/textfield/outlined-text-field.js'
import '@material/web/checkbox/checkbox.js'
import '@material/web/select/outlined-select.js'
import '@material/web/select/select-option.js'

import type { MdDialog } from '@material/web/dialog/dialog.js'

type Column = Exclude<InputData['formFields'], undefined>[number]
type Theme = {
    theme_name: string
    theme_object: any
}
@customElement('widget-form-versionplaceholder')
export class WidgetForm extends LitElement {
    @property({ type: Object })
    inputData?: InputData

    @property({ type: Object })
    theme?: Theme

    @property({ type: String })
    route?: string

    @state() private themeBgColor?: string
    @state() private themeTitleColor?: string

    @state() dialogOpen: boolean = false

    @query('md-dialog') dialog!: MdDialog

    @state() private formKey = 0

    version: string = 'versionplaceholder'

    update(changedProperties: Map<string, any>) {
        if (changedProperties.has('theme')) {
            this.registerTheme(this.theme)
        }

        super.update(changedProperties)
    }

    protected firstUpdated(_changedProperties: PropertyValues): void {
        this.registerTheme(this.theme)
    }

    registerTheme(theme?: Theme) {
        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
        this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
    }

    openFormDialog() {
        this.dialogOpen = true
    }

    handleFormSubmit(event: Event) {
        event.preventDefault()
        const submitter = (event as SubmitEvent).submitter as HTMLElement
        const action = submitter?.getAttribute('value') ?? 'submit'

        const form = event.target as HTMLFormElement
        const formData = new FormData(form)
        const submitData = this.inputData?.formFields?.map((field, i) => {
            const name = `column-${i}`
            let rawValue: any

            if (field.hiddenField) {
                rawValue = field.preFilledValue ?? field.defaultValue ?? ''
            } else if (field.type === 'checkbox') {
                rawValue = formData.has(name) ? 'on' : 'off'
            } else {
                const entry = formData.get(name)
                rawValue = entry === null || entry === '' ? (field.defaultValue ?? '') : entry
            }

            return {
                swarm_app_databackend_key: field.targetColumn?.swarm_app_databackend_key,
                table_name: field.targetColumn?.tablename,
                column_name: field.targetColumn?.column,
                value: this.formatValue(rawValue, field.type ?? 'textfield')
            }
        })

        if (this.inputData?.deleteFlagColumn)
            submitData?.push({
                swarm_app_databackend_key: this.inputData?.deleteFlagColumn?.swarm_app_databackend_key,
                table_name: this.inputData?.deleteFlagColumn?.tablename,
                column_name: this.inputData?.deleteFlagColumn?.column,
                value: action === 'delete'
            })

        this.dispatchEvent(
            new CustomEvent('data-submit', {
                detail: submitData,
                bubbles: false,
                composed: false
            })
        )

        if (action === 'delete') {
            const deleteRoute = this.resolveRoute({
                route: this.inputData?.deleteNavigationRoute,
                variables: this.inputData?.variables
            })
            if (deleteRoute) {
                this.dispatchEvent(
                    new CustomEvent('nav-submit', {
                        detail: { path: String(deleteRoute) },
                        bubbles: true,
                        composed: true
                    })
                )
            }
        }

        this.resetForm()
        this.dialogOpen = false
    }

    formatValue(value: string, type: string): any {
        switch (type) {
            case 'numberfield': {
                if (value === '' || value === null || value === undefined) return null
                const n = parseFloat(value)
                return Number.isNaN(n) ? null : n
            }
            case 'checkbox':
                return value === 'on' || value === 'true' ? true : false
            default:
                return value
        }
    }

    renderTextField(field: Column, i: number) {
        return html`
            <md-outlined-text-field
                .name="column-${i}"
                .label="${field.label ?? ''}"
                .type="${field.type === 'numberfield' ? 'number' : 'text'}"
                .value="${field.preFilledValue ?? ''}"
                .placeholder="${field.defaultValue ?? ''}"
                .pattern="${field.validation ?? ''}"
                supporting-text=${field.description ?? ''}
                validation-message="${field.validationMessage ?? 'Invalid input'}"
                ?required=${field.required && !field.defaultValue && !field.preFilledValue}
            ></md-outlined-text-field>
        `
    }

    renderNumberField(field: Column, i: number) {
        return html`
            <md-outlined-text-field
                .name="column-${i}"
                .label="${field.label ?? ''}"
                style="width: 200px;"
                type="number"
                .value="${field.preFilledValue ?? ''}"
                .placeholder="${field.defaultValue ?? ''}"
                step="any"
                min=${field.min ?? ''}
                max=${field.max ?? ''}
                supporting-text=${field.description ?? ''}
                ?required=${field.required && !field.defaultValue && !field.preFilledValue}
            ></md-outlined-text-field>
        `
    }

    renderCheckbox(field: Column, i: number) {
        return html`
            <div class="checkbox-container">
                <md-checkbox
                    name="column-${i}"
                    aria-label=${field.label ?? ''}
                    ?checked=${String(field.preFilledValue ?? field.defaultValue) === 'true'}
                    supporting-text=${field.description ?? ''}
                    ?required=${field.required && !field.defaultValue && !field.preFilledValue}
                ></md-checkbox>
                <label class="label"> ${field.label} </label>
            </div>
        `
    }

    renderTextArea(field: Column, i: number) {
        return html`
            <md-outlined-text-field
                .name="column-${i}"
                .label="${field.label ?? ''}"
                type="textarea"
                .value="${field.preFilledValue ?? ''}"
                .placeholder="${field.defaultValue ?? ''}"
                rows="3"
                ?required=${field.required && !field.defaultValue && !field.preFilledValue}
                supporting-text=${field.description ?? ''}
            ></md-outlined-text-field>
        `
    }

    renderDropdown(field: Column, i: number) {
        return html`
            <label class="label">
                ${field.label}
                <md-outlined-select
                    name="column-${i}"
                    supporting-text=${field.description ?? ''}
                    ?required=${field.required && !field.defaultValue && !field.preFilledValue}
                >
                    ${repeat(
                        field.values ?? [],
                        (val) => val.value,
                        (val) => {
                            return html`
                                <md-select-option
                                    .value="${val.value ?? ''}"
                                    ?selected="${val.value === (field.preFilledValue ?? field.defaultValue)}"
                                >
                                    ${val.displayLabel}
                                </md-select-option>
                            `
                        }
                    )}
                </md-outlined-select>
            </label>
        `
    }

    renderDateTimeField(field: Column, i: number) {
        return html`
            <md-outlined-text-field
                .name="column-${i}"
                style="width: 200px;"
                .label="${field.label ?? ''}"
                type="datetime-local"
                .value="${field.preFilledValue ?? field.defaultValue ?? ''}"
                supporting-text=${field.description ?? ''}
                ?required=${field.required && !field.defaultValue && !field.preFilledValue}
            ></md-outlined-text-field>
        `
    }

    resetForm() {
        this.formKey++
    }

    resolveRoute(item?: any): string | undefined {
        let route: string = item?.route ?? ''
        if (!route) return undefined
        if (item?.variables) {
            for (const variable of item.variables) {
                if (variable.label) {
                    route = route
                        .split(`{{${variable.label}}}`)
                        .join(encodeURIComponent(String(variable.value ?? '')))
                }
            }
        }
        if (route.includes('*')) {
            const currentSegments = (this.route || '').split('/').filter(Boolean)
            const routeSegments = route.split('/').filter(Boolean)
            for (let i = 0; i < routeSegments.length; i++) {
                if (routeSegments[i] === '*') {
                    routeSegments[i] = currentSegments[i] ?? ''
                }
            }
            route = (route.startsWith('/') ? '/' : '') + routeSegments.filter(Boolean).join('/')
        }
        return route
    }

    cancelEdit(event: Event) {
        this.resetForm()
        this.dialogOpen = false
    }

    static styles = css`
        :host {
            display: flex;
            flex-direction: column;
            font-family: sans-serif;
            box-sizing: border-box;
            position: relative;
            margin: auto;
        }

        .edit-fab {
            --md-fab-icon-color: white;
            --md-fab-container-color: #007bff;
            --md-fab-label-text-color: white;
            position: absolute;
            bottom: 24px;
            right: 24px;
            z-index: 10;
        }

        .paging:not([active]) {
            display: none !important;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            padding: 16px;
            box-sizing: border-box;
            overflow: auto;
        }

        .form-actions {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 16px;
        }

        h3 {
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 16px 0px 0px 16px;
            box-sizing: border-box;
        }
        p {
            margin: 10px 0 16px 0;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 16px;
            box-sizing: border-box;
        }

        /* The dialog classes */
        .form {
            min-width: 80%;
        }

        .form [slot='header'] {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
        }

        .form .headline {
            flex: 1;
        }

        .form-content,
        .form-row {
            display: flex;
            gap: 8px;
        }

        .form-content {
            flex-direction: column;
            gap: 24px;
        }

        .form-row > * {
            flex: 1;
        }

        .checkbox-container {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .label {
            display: flex;
            flex-direction: column;
        }

        md-outlined-select {
            flex: 1;
        }

        md-dialog {
            overflow: visible;
        }

        .header {
            display: flex;
            align-items: center;
            --md-fab-icon-color: white;
            --md-fab-container-color: #007bff;
            --md-fab-label-text-color: white;
        }

        .delete-btn {
            --md-filled-button-container-color: #d32f2f;
            --md-filled-button-label-text-color: #fff;
            --md-filled-button-hover-label-text-color: #fff;
            --md-filled-button-focus-label-text-color: #fff;
            --md-filled-button-pressed-label-text-color: #fff;
        }
    `

    render() {
        const fontColor = this.themeTitleColor
        const bgColor = this.themeBgColor
        const bgColorOpaque = bgColor?.startsWith('rgba')
            ? bgColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgb($1)')
            : bgColor?.startsWith('#') && bgColor.length === 9
              ? bgColor.substring(0, 7)
              : bgColor
        return html`
            <style>
                :host {
                    --md-sys-color-on-surface: ${fontColor};
                    --md-sys-color-on-surface-variant: ${fontColor};
                    --md-sys-color-outline: ${fontColor};
                    --md-sys-color-surface-container: ${bgColorOpaque};
                    --md-menu-container-color: ${bgColorOpaque};
                    --md-menu-item-selected-container-color: ${bgColorOpaque};
                    --md-menu-item-selected-label-text-color: ${fontColor};
                    color: ${fontColor};
                }
            </style>
            <div class="header">
                ${this.inputData?.formButton
                    ? html`
                          <md-fab
                              aria-label="Add"
                              style="margin-left: 16px; --md-fab-container-color: ${this.theme?.theme_object
                                  ?.color?.[0] ?? '#9064f7'}"
                              @click=${this.openFormDialog}
                          >
                              <md-icon slot="icon">add</md-icon>
                          </md-fab>
                      `
                    : nothing}
                <header>
                    <h3 class="paging" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>
                    <p class="paging" ?active=${this.inputData?.subTitle}>${this.inputData?.subTitle}</p>
                </header>
            </div>
            ${!this.inputData?.formButton
                ? html`
                      <div class="wrapper">
                          ${this.renderForm()}
                          <div class="form-actions">
                              ${this.inputData?.deleteButton
                                  ? html`<md-filled-button
                                        class="delete-btn"
                                        form="form"
                                        value="delete"
                                        type="submit"
                                        >Delete</md-filled-button
                                    >`
                                  : nothing}
                              <md-outlined-button @click=${this.resetForm}>Reset</md-outlined-button>
                              <md-filled-button form="form" value="submit" type="submit" autofocus
                                  >Submit</md-filled-button
                              >
                          </div>
                      </div>
                  `
                : html`
                      <md-dialog
                          aria-label="${this.inputData?.title ?? 'Data Entry'}"
                          class="form"
                          quick
                          ?open=${this.dialogOpen}
                          @cancel=${(event: any) => {
                              event.preventDefault()
                          }}
                          @keydown=${(event: any) => {
                              if (event.key === 'Escape') event.preventDefault()
                          }}
                          @closed=${() => (this.dialogOpen = false)}
                      >
                          <div slot="headline">${this.inputData?.title ?? 'Data Entry'}</div>
                          ${this.renderForm()}
                          <div slot="actions">
                              ${this.inputData?.deleteButton
                                  ? html`<md-filled-button
                                        class="delete-btn"
                                        form="form"
                                        value="delete"
                                        type="submit"
                                        >Delete</md-filled-button
                                    >`
                                  : nothing}
                              <md-outlined-button @click=${this.resetForm}>Reset</md-outlined-button>
                              <md-outlined-button @click=${this.cancelEdit}>Cancel</md-outlined-button>
                              <md-filled-button form="form" value="submit" type="submit" autofocus
                                  >Submit</md-filled-button
                              >
                          </div>
                      </md-dialog>
                  `}
        `
    }

    renderForm() {
        return keyed(
            this.formKey,
            html`
                <form
                    id="form"
                    slot="content"
                    method="dialog"
                    class="form-content"
                    @submit=${this.handleFormSubmit}
                >
                    ${repeat(
                        this.inputData?.formFields ?? [],
                        (field, i) => i,
                        (field, i) => {
                            if (field.hiddenField) return nothing
                            switch (field.type) {
                                case 'textfield':
                                    return this.renderTextField(field, i)
                                case 'numberfield':
                                    return this.renderNumberField(field, i)
                                case 'datetime':
                                    return this.renderDateTimeField(field, i)
                                case 'textarea':
                                    return this.renderTextArea(field, i)
                                case 'dropdown':
                                    return this.renderDropdown(field, i)
                                case 'checkbox':
                                    return this.renderCheckbox(field, i)
                            }
                        }
                    )}
                </form>
            `
        )
    }
}