<template>
    <v-dialog :width="account.type === allAccountTypes.MultiSubAccounts ? 1000 : 800" :persistent="!!persistent" v-model="showState">
        <v-card class="pa-2 pa-sm-4 pa-md-8">
            <template #title>
                <div class="d-flex align-center justify-center">
                    <div class="d-flex w-100 align-center justify-center">
                        <h5 class="text-h5">{{ $t(title) }}</h5>
                        <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
                    </div>
                    <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"
                           :disabled="loading || submitting || !!editAccountId || account.type !== allAccountTypes.MultiSubAccounts">
                        <v-icon :icon="icons.more" />
                        <v-menu activator="parent">
                            <v-list>
                                <v-list-item :prepend-icon="icons.add"
                                             :title="$t('Add Sub Account')"
                                             @click="addSubAccount"></v-list-item>
                            </v-list>
                        </v-menu>
                    </v-btn>
                </div>
            </template>
            <v-card-text class="d-flex flex-column flex-md-row mt-2 mt-md-4">
                <div class="mb-4" v-if="account.type === allAccountTypes.MultiSubAccounts">
                    <v-tabs direction="vertical" :disabled="loading || submitting" v-model="currentAccountIndex">
                        <v-tab :value="-1">
                            <span>{{ $t('Main Account') }}</span>
                        </v-tab>
                        <template v-if="account.type === allAccountTypes.MultiSubAccounts">
                            <v-tab :key="idx" :value="idx" v-for="(subAccount, idx) in subAccounts">
                                <span>{{ $t('Sub Account') + ' #' + (idx + 1) }}</span>
                                <v-btn class="ml-2" color="error" size="24" variant="text"
                                       :icon="icons.delete" v-if="!editAccountId"
                                       @click="removeSubAccount(subAccount)"></v-btn>
                            </v-tab>
                        </template>
                    </v-tabs>
                </div>

                <v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container"
                          :class="{ 'ml-md-5': account.type === allAccountTypes.MultiSubAccounts }"
                          v-model="activeTab">
                    <v-window-item value="account">
                        <v-form class="mt-2">
                            <v-row>
                                <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex < 0">
                                    <v-select
                                        item-title="displayName"
                                        item-value="id"
                                        persistent-placeholder
                                        :disabled="loading || submitting"
                                        :label="$t('Account Category')"
                                        :placeholder="$t('Account Category')"
                                        :items="allAccountCategories"
                                        :no-data-text="$t('No results')"
                                        v-model="selectedAccount.category"
                                    >
                                        <template #item="{ props, item }">
                                            <v-list-item :value="item.value" v-bind="props">
                                                <template #title>
                                                    <v-list-item-title>
                                                        <div class="d-flex align-center">
                                                            <ItemIcon icon-type="account"
                                                                      :icon-id="item.raw.defaultAccountIconId"
                                                                      v-if="item.raw" />
                                                            <span class="ml-2">{{ item.title }}</span>
                                                        </div>
                                                    </v-list-item-title>
                                                </template>
                                            </v-list-item>
                                        </template>
                                    </v-select>
                                </v-col>
                                <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex < 0">
                                    <v-select
                                        item-title="displayName"
                                        item-value="id"
                                        persistent-placeholder
                                        :disabled="loading || submitting || !!editAccountId"
                                        :label="$t('Account Type')"
                                        :placeholder="$t('Account Type')"
                                        :items="allAccountTypesArray"
                                        :no-data-text="$t('No results')"
                                        v-model="selectedAccount.type"
                                    />
                                </v-col>
                                <v-col cols="12" md="12">
                                    <v-text-field
                                        type="text"
                                        clearable
                                        persistent-placeholder
                                        :disabled="loading || submitting"
                                        :label="currentAccountIndex < 0 ? $t('Account Name') : $t('Sub Account Name')"
                                        :placeholder="currentAccountIndex < 0 ? $t('Your account name') : $t('Your sub account name')"
                                        v-model="selectedAccount.name"
                                    />
                                </v-col>
                                <v-col cols="12" md="6">
                                    <icon-select icon-type="account"
                                                 :all-icon-infos="allAccountIcons"
                                                 :label="currentAccountIndex < 0 ? $t('Account Icon') : $t('Sub Account Icon')"
                                                 :color="selectedAccount.color"
                                                 :disabled="loading || submitting"
                                                 v-model="selectedAccount.icon" />
                                </v-col>
                                <v-col cols="12" md="6">
                                    <color-select :all-color-infos="allAccountColors"
                                                  :label="currentAccountIndex < 0 ? $t('Account Color') : $t('Sub Account Color')"
                                                  :disabled="loading || submitting"
                                                  v-model="selectedAccount.color" />
                                </v-col>
                                <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
                                    <v-autocomplete
                                        item-title="displayName"
                                        item-value="code"
                                        auto-select-first
                                        persistent-placeholder
                                        :disabled="loading || submitting || !!editAccountId"
                                        :label="$t('Currency')"
                                        :placeholder="$t('Currency')"
                                        :items="allCurrencies"
                                        :no-data-text="$t('No results')"
                                        v-model="selectedAccount.currency"
                                    >
                                        <template #append-inner>
                                            <small class="text-field-append-text smaller">{{ selectedAccount.currency }}</small>
                                        </template>
                                    </v-autocomplete>
                                </v-col>
                                <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
                                    <amount-input :disabled="loading || submitting || !!editAccountId"
                                                  :persistent-placeholder="true"
                                                  :currency="selectedAccount.currency"
                                                  :label="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub Account Balance')"
                                                  :placeholder="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub Account Balance')"
                                                  v-model="selectedAccount.balance"/>
                                </v-col>
                                <v-col cols="12" md="12">
                                    <v-textarea
                                        type="text"
                                        persistent-placeholder
                                        rows="3"
                                        :disabled="loading || submitting"
                                        :label="$t('Description')"
                                        :placeholder="currentAccountIndex < 0 ? $t('Your account description (optional)') : $t('Your sub account description (optional)')"
                                        v-model="selectedAccount.comment"
                                    />
                                </v-col>
                                <v-col class="py-0" cols="12" md="12" v-if="editAccountId">
                                    <v-switch inset :disabled="loading || submitting"
                                              :label="$t('Visible')" v-model="selectedAccount.visible"/>
                                </v-col>
                            </v-row>
                        </v-form>
                    </v-window-item>
                </v-window>
            </v-card-text>
            <v-card-text class="overflow-y-visible">
                <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
                    <v-btn :disabled="isInputEmpty() || loading || submitting" @click="save">
                        {{ $t(saveButtonTitle) }}
                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
                    </v-btn>
                    <v-btn color="secondary" variant="tonal"
                           :disabled="loading || submitting" @click="cancel">{{ $t('Cancel') }}</v-btn>
                </div>
            </v-card-text>
        </v-card>
    </v-dialog>

    <confirm-dialog ref="confirmDialog"/>
    <snack-bar ref="snackbar" />
</template>

<script>
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/setting.js';
import { useAccountsStore } from '@/stores/account.js';

import accountConstants from '@/consts/account.js';
import iconConstants from '@/consts/icon.js';
import colorConstants from '@/consts/color.js';
import { isNumber } from '@/lib/common.js';
import {
    setAccountModelByAnotherAccount,
    setAccountSuitableIcon
} from '@/lib/account.js';

import {
    mdiDotsVertical,
    mdiCreditCardPlusOutline,
    mdiDeleteOutline
} from '@mdi/js';

export default {
    props: [
        'persistent',
        'show'
    ],
    expose: [
        'open'
    ],
    data() {
        const accountsStore = useAccountsStore();
        const newAccount = accountsStore.generateNewAccountModel();

        return {
            showState: false,
            activeTab: 'account',
            editAccountId: null,
            loading: false,
            account: newAccount,
            subAccounts: [],
            currentAccountIndex: -1,
            submitting: false,
            resolve: null,
            reject: null,
            icons: {
                more: mdiDotsVertical,
                add: mdiCreditCardPlusOutline,
                delete: mdiDeleteOutline
            }
        };
    },
    computed: {
        ...mapStores(useSettingsStore, useAccountsStore),
        title() {
            if (!this.editAccountId) {
                return 'Add Account';
            } else {
                return 'Edit Account';
            }
        },
        saveButtonTitle() {
            if (!this.editAccountId) {
                return 'Add';
            } else {
                return 'Save';
            }
        },
        allAccountTypes() {
            return accountConstants.allAccountTypes;
        },
        allAccountCategories() {
            return this.$locale.getAllAccountCategories();
        },
        allAccountTypesArray() {
            return this.$locale.getAllAccountTypes();
        },
        allAccountIcons() {
            return iconConstants.allAccountIcons;
        },
        allAccountColors() {
            return colorConstants.allAccountColors;
        },
        allCurrencies() {
            return this.$locale.getAllCurrencies();
        },
        selectedAccount() {
            if (this.currentAccountIndex < 0) {
                return this.account;
            }

            return this.subAccounts[this.currentAccountIndex];
        }
    },
    watch: {
        'account.category': function (newValue, oldValue) {
            this.chooseSuitableIcon(oldValue, newValue);
        },
        'account.type': function () {
            if (this.subAccounts.length < 1) {
                this.addSubAccount();
            }
        }
    },
    methods: {
        open(options) {
            const self = this;
            self.showState = true;
            self.loading = true;
            self.submitting = false;

            const newAccount = self.accountsStore.generateNewAccountModel();
            setAccountModelByAnotherAccount(self.account, newAccount);
            self.subAccounts = [];
            self.currentAccountIndex = -1;

            if (options && options.id) {
                if (options.currentAccount) {
                    self.setAccount(options.currentAccount);
                }

                self.editAccountId = options.id;
                self.accountsStore.getAccount({
                    accountId: self.editAccountId
                }).then(account => {
                    self.setAccount(account);
                    self.loading = false;
                }).catch(error => {
                    self.loading = false;
                    self.showState = false;

                    if (!error.processed) {
                        if (self.reject) {
                            self.reject(error);
                        }
                    }
                });
            } else {
                if (isNumber(options.category)) {
                    self.account.category = options.category;
                    self.chooseSuitableIcon(1, options.category);
                }

                self.editAccountId = null;
                self.loading = false;
            }

            return new Promise((resolve, reject) => {
                self.resolve = resolve;
                self.reject = reject;
            });
        },
        addSubAccount() {
            if (this.account.type !== this.allAccountTypes.MultiSubAccounts) {
                return;
            }

            const subAccount = this.accountsStore.generateNewSubAccountModel(this.account);
            this.subAccounts.push(subAccount);
        },
        removeSubAccount(subAccount) {
            const self = this;

            self.$refs.confirmDialog.open('Are you sure you want to remove this sub account?').then(() => {
                for (let i = 0; i < self.subAccounts.length; i++) {
                    if (self.subAccounts[i] === subAccount) {
                        self.subAccounts.splice(i, 1);

                        if (self.currentAccountIndex >= self.subAccounts.length) {
                            self.currentAccountIndex = self.subAccounts.length - 1;
                        }
                    }
                }
            });
        },
        save() {
            const self = this;

            let problemMessage = self.getInputEmptyProblemMessage(self.account, false);

            if (!problemMessage && self.account.type === self.allAccountTypes.MultiSubAccounts) {
                for (let i = 0; i < self.subAccounts.length; i++) {
                    problemMessage = self.getInputEmptyProblemMessage(self.subAccounts[i], true);

                    if (problemMessage) {
                        break;
                    }
                }
            }

            if (problemMessage) {
                self.$refs.snackbar.showMessage(problemMessage);
                return;
            }

            self.submitting = true;

            self.accountsStore.saveAccount({
                account: self.account,
                subAccounts: self.subAccounts,
                isEdit: !!self.editAccountId
            }).then(() => {
                self.submitting = false;

                let message = 'You have saved this account';

                if (!self.editAccountId) {
                    message = 'You have added a new account';
                }

                if (self.resolve) {
                    self.resolve({
                        message: message
                    });
                }

                self.showState = false;
            }).catch(error => {
                self.submitting = false;

                if (!error.processed) {
                    self.$refs.snackbar.showError(error);
                }
            });
        },
        cancel() {
            if (this.reject) {
                this.reject();
            }

            this.showState = false;
        },
        chooseSuitableIcon(oldCategory, newCategory) {
            setAccountSuitableIcon(this.account, oldCategory, newCategory);
        },
        isInputEmpty() {
            const isAccountEmpty = !!this.getInputEmptyProblemMessage(this.account, false);

            if (isAccountEmpty) {
                return true;
            }

            if (this.account.type === this.allAccountTypes.MultiSubAccounts) {
                for (let i = 0; i < this.subAccounts.length; i++) {
                    const isSubAccountEmpty = !!this.getInputEmptyProblemMessage(this.subAccounts[i], true);

                    if (isSubAccountEmpty) {
                        return true;
                    }
                }
            }

            return false;
        },
        getInputEmptyProblemMessage(account, isSubAccount) {
            if (!isSubAccount && !account.category) {
                return 'Account category cannot be empty';
            } else if (!isSubAccount && !account.type) {
                return 'Account type cannot be empty';
            } else if (!account.name) {
                return 'Account name cannot be empty';
            } else if (account.type === this.allAccountTypes.SingleAccount && !account.currency) {
                return 'Account currency cannot be empty';
            } else {
                return null;
            }
        },
        setAccount(account) {
            setAccountModelByAnotherAccount(this.account, account);
            this.subAccounts = [];

            if (account.subAccounts && account.subAccounts.length > 0) {
                for (let i = 0; i < account.subAccounts.length; i++) {
                    const subAccount = this.accountsStore.generateNewSubAccountModel(this.account);
                    setAccountModelByAnotherAccount(subAccount, account.subAccounts[i]);

                    this.subAccounts.push(subAccount);
                }
            }
        }
    }
}
</script>
