<template>
    <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
        <f7-navbar>
            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
            <f7-nav-title>
                <f7-link popover-open=".chart-data-type-popover-menu">
                    <span>{{ query.chartDataType | chartDataTypeName(allChartDataTypes) | localized }}</span>
                    <f7-icon size="14px" :f7="showChartDataTypePopover ? 'arrowtriangle_up_fill' : 'arrowtriangle_down_fill'"></f7-icon>
                </f7-link>
            </f7-nav-title>
            <f7-nav-right>
                <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
            </f7-nav-right>
        </f7-navbar>

        <f7-popover class="chart-data-type-popover-menu" :opened="showChartDataTypePopover"
                    @popover:open="showChartDataTypePopover = true" @popover:close="showChartDataTypePopover = false">
            <f7-list>
                <f7-list-item
                    v-for="dataType in allChartDataTypes" :key="dataType.type"
                    :title="$t(dataType.name)" @click="setChartDataType(dataType.type)">
                    <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.chartDataType === dataType.type"></f7-icon>
                </f7-list-item>
            </f7-list>
        </f7-popover>

        <f7-card v-if="query.chartType === $constants.statistics.allChartTypes.Pie">
            <f7-card-content class="pie-chart-container" :padding="false">
                <pie-chart
                    :items="[{value: 60, color: '7c7c7f'}, {value: 20, color: 'a5a5aa'}, {value: 20, color: 'c5c5c9'}]"
                    :skeleton="true"
                    :show-center-text="true"
                    :show-selected-item-info="true"
                    class="statistics-pie-chart"
                    value-field="value"
                    color-field="color"
                    center-text-background="#cccccc"
                    v-if="loading"
                ></pie-chart>
                <pie-chart
                    :items="statisticsData.items"
                    :min-valid-percent="0.0001"
                    :show-center-text="true"
                    :show-selected-item-info="true"
                    :enable-click-item="true"
                    :default-currency="defaultCurrency"
                    class="statistics-pie-chart"
                    name-field="name"
                    value-field="totalAmount"
                    percent-field="percent"
                    currency-field="currency"
                    color-field="color"
                    hidden-field="hidden"
                    v-else-if="!loading"
                    @click="clickPieChartItem"
                >
                    <text class="statistics-pie-chart-total-amount-title" v-if="statisticsData.items && statisticsData.items.length">
                        {{ query.chartDataType | totalAmountName(allChartDataTypes) | localized }}
                    </text>
                    <text class="statistics-pie-chart-total-amount-value" v-if="statisticsData.items && statisticsData.items.length">
                        {{ statisticsData.totalAmount | currency(defaultCurrency) }}
                    </text>
                    <text class="statistics-pie-chart-total-no-data" cy="50%" v-if="!statisticsData.items || !statisticsData.items.length">
                        {{ $t('No data') }}
                    </text>
                </pie-chart>
            </f7-card-content>
        </f7-card>

        <f7-card v-else-if="query.chartType === $constants.statistics.allChartTypes.Bar">
            <f7-card-content class="no-safe-areas" :padding="false">
                <f7-list class="statistics-list-item skeleton-text" v-if="loading">
                    <f7-list-item link="#">
                        <div slot="media" class="display-flex no-padding-horizontal">
                            <div class="display-flex align-items-center statistics-icon">
                                <f7-icon slot="media" f7="app_fill"></f7-icon>
                            </div>
                        </div>

                        <div slot="title">
                            <span>Category Name 1</span>
                            <small class="statistics-percent">33.33</small>
                        </div>

                        <div slot="after">
                            <span>0.00 USD</span>
                        </div>

                        <div slot="inner-end" class="statistics-item-end">
                            <div class="statistics-percent-line">
                                <f7-progressbar></f7-progressbar>
                            </div>
                        </div>
                    </f7-list-item>
                    <f7-list-item link="#">
                        <div slot="media" class="display-flex no-padding-horizontal">
                            <div class="display-flex align-items-center statistics-icon">
                                <f7-icon slot="media" f7="app_fill"></f7-icon>
                            </div>
                        </div>

                        <div slot="title">
                            <span>Category Name 2</span>
                            <small class="statistics-percent">33.33</small>
                        </div>

                        <div slot="after">
                            <span>0.00 USD</span>
                        </div>

                        <div slot="inner-end" class="statistics-item-end">
                            <div class="statistics-percent-line">
                                <f7-progressbar></f7-progressbar>
                            </div>
                        </div>
                    </f7-list-item>
                    <f7-list-item link="#">
                        <div slot="media" class="display-flex no-padding-horizontal">
                            <div class="display-flex align-items-center statistics-icon">
                                <f7-icon slot="media" f7="app_fill"></f7-icon>
                            </div>
                        </div>

                        <div slot="title">
                            <span>Category Name 3</span>
                            <small class="statistics-percent">33.33</small>
                        </div>

                        <div slot="after">
                            <span>0.00 USD</span>
                        </div>

                        <div slot="inner-end" class="statistics-item-end">
                            <div class="statistics-percent-line">
                                <f7-progressbar></f7-progressbar>
                            </div>
                        </div>
                    </f7-list-item>
                </f7-list>
                <f7-list v-else-if="!loading && (!statisticsData || !statisticsData.items || !statisticsData.items.length)">
                    <f7-list-item :title="$t('No transaction data')"></f7-list-item>
                </f7-list>
                <f7-list v-else-if="!loading && statisticsData && statisticsData.items && statisticsData.items.length">
                    <f7-list-item class="statistics-list-item-overview">
                        <div slot="header">
                            {{ query.chartDataType | totalAmountName(allChartDataTypes) | localized }}
                        </div>
                        <div slot="title"
                             :class="{ 'statistics-list-item-overview-amount': true, 'text-color-teal': query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByAccount.type || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-color-red': query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByAccount.type || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeBySecondaryCategory.type }">
                            {{ statisticsData.totalAmount | currency(defaultCurrency) }}
                        </div>
                    </f7-list-item>
                    <f7-list-item v-for="(item, idx) in statisticsData.items" :key="idx"
                                  class="statistics-list-item"
                                  :link="item | itemLinkUrl(query, $constants.statistics.allChartDataTypes)"
                                  v-show="!item.hidden"
                    >
                        <div slot="media" class="display-flex no-padding-horizontal">
                            <div class="display-flex align-items-center statistics-icon">
                                <f7-icon v-if="item.icon"
                                         :icon="item.icon | icon(item.type)"
                                         :style="item.color | iconStyle(item.type, 'var(--category-icon-color)')">
                                </f7-icon>
                                <f7-icon v-else-if="!item.icon"
                                         f7="pencil_ellipsis_rectangle">
                                </f7-icon>
                            </div>
                        </div>

                        <div slot="title">
                            <span>{{ item.name }}</span>
                            <small class="statistics-percent" v-if="item.percent >= 0">{{ item.percent | percent(2, '&lt;0.01') }}</small>
                        </div>

                        <div slot="after">
                            <span>{{ item.totalAmount | currency(item.currency || defaultCurrency) }}</span>
                        </div>

                        <div slot="inner-end" class="statistics-item-end">
                            <div class="statistics-percent-line">
                                <f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': (item.color ? '#' + item.color : '') } "></f7-progressbar>
                            </div>
                        </div>
                    </f7-list-item>
                </f7-list>
            </f7-card-content>
        </f7-card>

        <f7-toolbar tabbar bottom class="toolbar-item-auto-size">
            <f7-link :class="{ 'disabled': query.dateType === $constants.datetime.allDateRanges.All.type || query.chartDataType === $constants.statistics.allChartDataTypes.AccountTotalAssets.type || query.chartDataType === $constants.statistics.allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.startTime, query.endTime, -1)">
                <f7-icon f7="arrow_left_square"></f7-icon>
            </f7-link>
            <f7-link :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': query.chartDataType === $constants.statistics.allChartDataTypes.AccountTotalAssets.type || query.chartDataType === $constants.statistics.allChartDataTypes.AccountTotalLiabilities.type }" popover-open=".date-popover-menu">
                <span :class="{ 'tabbar-item-changed': query.maxTime > 0 || query.minTime > 0 }">{{ dateRangeName(query) }}</span>
            </f7-link>
            <f7-link :class="{ 'disabled': query.dateType === $constants.datetime.allDateRanges.All.type || query.chartDataType === $constants.statistics.allChartDataTypes.AccountTotalAssets.type || query.chartDataType === $constants.statistics.allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.startTime, query.endTime, 1)">
                <f7-icon f7="arrow_right_square"></f7-icon>
            </f7-link>
            <f7-link class="tabbar-text-with-ellipsis" @click="setChartType($constants.statistics.allChartTypes.Pie)">
                <span :class="{ 'tabbar-item-changed': query.chartType === $constants.statistics.allChartTypes.Pie }">{{ $t('Pie Chart') }}</span>
            </f7-link>
            <f7-link class="tabbar-text-with-ellipsis" @click="setChartType($constants.statistics.allChartTypes.Bar)">
                <span :class="{ 'tabbar-item-changed': query.chartType === $constants.statistics.allChartTypes.Bar }">{{ $t('Bar Chart') }}</span>
            </f7-link>
        </f7-toolbar>

        <f7-popover class="date-popover-menu" :opened="showDatePopover"
                    @popover:opened="showDatePopover = true" @popover:closed="showDatePopover = false">
            <f7-list>
                <f7-list-item v-for="dateRange in allDateRanges"
                              :key="dateRange.type"
                              :title="dateRange.name | localized"
                              @click="setDateFilter(dateRange.type)">
                    <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
                    <div slot="footer"
                         v-if="dateRange.type === $constants.datetime.allDateRanges.Custom.type && query.dateType === $constants.datetime.allDateRanges.Custom.type && query.startTime && query.endTime">
                        <span>{{ query.startTime | moment($t('format.datetime.long-without-second')) }}</span>
                        <span>&nbsp;-&nbsp;</span>
                        <br/>
                        <span>{{ query.endTime | moment($t('format.datetime.long-without-second')) }}</span>
                    </div>
                </f7-list-item>
            </f7-list>
        </f7-popover>

        <date-range-selection-sheet :title="$t('Custom Date Range')"
                                    :show.sync="showCustomDateRangeSheet"
                                    :min-time="query.startTime"
                                    :max-time="query.endTime"
                                    @dateRange:change="setCustomDateFilter">
        </date-range-selection-sheet>

        <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
            <f7-actions-group>
                <f7-actions-button @click="filterAccounts">{{ $t('Filter Accounts') }}</f7-actions-button>
                <f7-actions-button @click="filterCategories">{{ $t('Filter Transaction Categories') }}</f7-actions-button>
            </f7-actions-group>
            <f7-actions-group>
                <f7-actions-button @click="settings">{{ $t('Settings') }}</f7-actions-button>
            </f7-actions-group>
            <f7-actions-group>
                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
            </f7-actions-group>
        </f7-actions>
    </f7-page>
</template>

<script>
export default {
    data() {
        return {
            loading: true,
            showChartDataTypePopover: false,
            showDatePopover: false,
            showCustomDateRangeSheet: false,
            showMoreActionSheet: false
        };
    },
    computed: {
        defaultCurrency() {
            if (this.query.accountId && this.query.accountId !== '0') {
                const account = this.allAccounts[this.query.accountId];

                if (account && account.currency && account.currency !== this.$constants.currency.parentAccountCurrencyPlaceholder) {
                    return account.currency;
                }
            }

            return this.$store.getters.currentUserDefaultCurrency || this.$t('default.currency');
        },
        firstDayOfWeek() {
            if (this.$utilities.isNumber(this.$store.getters.currentUserFirstDayOfWeek)) {
                return this.$store.getters.currentUserFirstDayOfWeek;
            }

            if (this.$constants.datetime.allWeekDays[this.$t('default.firstDayOfWeek')]) {
                return this.$constants.datetime.allWeekDays[this.$t('default.firstDayOfWeek')].type;
            }

            return 0;
        },
        query() {
            return this.$store.state.transactionStatisticsFilter;
        },
        allChartDataTypes() {
            return this.$constants.statistics.allChartDataTypes;
        },
        allDateRanges() {
            return this.$constants.datetime.allDateRanges;
        },
        statisticsData() {
            const self = this;
            let combinedData = {
                items: [],
                totalAmount: 0
            };

            if (self.query.chartDataType === self.$constants.statistics.allChartDataTypes.ExpenseByAccount.type ||
                self.query.chartDataType === self.$constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory.type ||
                self.query.chartDataType === self.$constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory.type ||
                self.query.chartDataType === self.$constants.statistics.allChartDataTypes.IncomeByAccount.type ||
                self.query.chartDataType === self.$constants.statistics.allChartDataTypes.IncomeByPrimaryCategory.type ||
                self.query.chartDataType === self.$constants.statistics.allChartDataTypes.IncomeBySecondaryCategory.type) {
                combinedData = this.getDataItemsByTransactions(self.$store.state.transactionStatistics);
            } else if (self.query.chartDataType === self.$constants.statistics.allChartDataTypes.AccountTotalAssets.type ||
                self.query.chartDataType === self.$constants.statistics.allChartDataTypes.AccountTotalLiabilities.type) {
                combinedData = this.getDataItemsByAccounts(self.$store.getters.allPlainAccounts);
            }

            const allStatisticsItems = [];

            for (let id in combinedData.items) {
                if (!Object.prototype.hasOwnProperty.call(combinedData.items, id)) {
                    continue;
                }

                const data = combinedData.items[id];

                if (data.totalAmount > 0) {
                    data.percent = data.totalAmount * 100 / combinedData.totalNonNegativeAmount;
                } else {
                    data.percent = 0;
                }

                if (data.percent < 0) {
                    data.percent = 0;
                }

                allStatisticsItems.push(data);
            }

            allStatisticsItems.sort(function (data1, data2) {
                return data2.totalAmount - data1.totalAmount;
            });

            return {
                totalAmount: combinedData.totalAmount,
                items: allStatisticsItems
            };
        }
    },
    created() {
        const self = this;
        const router = self.$f7router;

        let defaultChartType = self.$settings.getStatisticsDefaultChartType();

        if (defaultChartType !== self.$constants.statistics.allChartTypes.Pie && defaultChartType !== self.$constants.statistics.allChartTypes.Bar) {
            defaultChartType = self.$constants.statistics.defaultChartType;
        }

        let defaultChartDataType = self.$settings.getStatisticsDefaultChartDataType();

        if (defaultChartDataType < self.$constants.statistics.allChartDataTypes.ExpenseByAccount.type || defaultChartDataType > self.$constants.statistics.allChartDataTypes.AccountTotalLiabilities.type) {
            defaultChartDataType = self.$constants.statistics.defaultChartDataType;
        }

        let defaultDateRange = self.$settings.getStatisticsDefaultDateRange();

        if (defaultDateRange < self.$constants.datetime.allDateRanges.All.type || defaultDateRange >= self.$constants.datetime.allDateRanges.Custom.type) {
            defaultDateRange = self.$constants.statistics.defaultDataRangeType;
        }

        const dateRange = self.$utilities.getDateRangeByDateType(defaultDateRange, self.firstDayOfWeek);

        self.$store.dispatch('initTransactionStatisticsFilter', {
            dateType: dateRange ? dateRange.dateType : undefined,
            startTime: dateRange ? dateRange.minTime : undefined,
            endTime: dateRange ? dateRange.maxTime : undefined,
            chartType: defaultChartType,
            chartDataType: defaultChartDataType,
        });

        Promise.all([
            self.$store.dispatch('loadAllAccounts', { force: false }),
            self.$store.dispatch('loadAllCategories', { force: false })
        ]).then(() => {
            return self.$store.dispatch('loadTransactionStatistics', {
                defaultCurrency: self.defaultCurrency
            });
        }).then(() => {
            self.loading = false;
        }).catch(error => {
            self.loading = false;

            if (!error.processed) {
                self.$toast(error.message || error);
                router.back();
            }
        });
    },
    methods: {
        onPageAfterIn() {
            if (this.$store.state.transactionStatisticsStateInvalid && !this.loading) {
                this.reload(null);
            }
        },
        reload(done) {
            const self = this;

            self.$store.dispatch('loadTransactionStatistics', {
                defaultCurrency: self.defaultCurrency
            }).then(() => {
                if (done) {
                    done();
                }
            }).catch(error => {
                if (done) {
                    done();
                }

                if (!error.processed) {
                    self.$toast(error.message || error);
                }
            });
        },
        setChartType(chartType) {
            this.$store.dispatch('updateTransactionStatisticsFilter', {
                chartType: chartType
            });
        },
        setChartDataType(chartDataType) {
            this.$store.dispatch('updateTransactionStatisticsFilter', {
                chartDataType: chartDataType
            });
            this.showChartDataTypePopover = false;
        },
        setDateFilter(dateType) {
            if (dateType === this.$constants.datetime.allDateRanges.Custom.type) { // Custom
                this.showCustomDateRangeSheet = true;
                this.showDatePopover = false;
                return;
            } else if (this.query.dateType === dateType) {
                return;
            }

            const dateRange = this.$utilities.getDateRangeByDateType(dateType, this.firstDayOfWeek);

            if (!dateRange) {
                return;
            }

            this.$store.dispatch('updateTransactionStatisticsFilter', {
                dateType: dateRange.dateType,
                startTime: dateRange.minTime,
                endTime: dateRange.maxTime
            });

            this.showDatePopover = false;
            this.reload(null);
        },
        setCustomDateFilter(startTime, endTime) {
            if (!startTime || !endTime) {
                return;
            }

            this.$store.dispatch('updateTransactionStatisticsFilter', {
                dateType: this.$constants.datetime.allDateRanges.Custom.type,
                startTime: startTime,
                endTime: endTime
            });

            this.showCustomDateRangeSheet = false;

            this.reload(null);
        },
        shiftDateRange(startTime, endTime, scale) {
            if (this.query.dateType === this.$constants.datetime.allDateRanges.All.type) {
                return;
            }

            const newDateRange = this.$utilities.getShiftedDateRange(startTime, endTime, scale);
            let newDateType = this.$constants.datetime.allDateRanges.Custom.type;

            for (let dateRangeField in this.$constants.datetime.allDateRanges) {
                if (!Object.prototype.hasOwnProperty.call(this.$constants.datetime.allDateRanges, dateRangeField)) {
                    continue;
                }

                const dateRangeType = this.$constants.datetime.allDateRanges[dateRangeField];
                const dateRange = this.$utilities.getDateRangeByDateType(dateRangeType.type, this.firstDayOfWeek);

                if (dateRange && dateRange.minTime === newDateRange.minTime && dateRange.maxTime === newDateRange.maxTime) {
                    newDateType = dateRangeType.type;
                    break;
                }
            }

            this.$store.dispatch('updateTransactionStatisticsFilter', {
                dateType: newDateType,
                startTime: newDateRange.minTime,
                endTime: newDateRange.maxTime
            });

            this.reload(null);
        },
        dateRangeName(query) {
            if (query.chartDataType === this.$constants.statistics.allChartDataTypes.AccountTotalAssets.type ||
                query.chartDataType === this.$constants.statistics.allChartDataTypes.AccountTotalLiabilities.type) {
                return this.$t(this.allDateRanges.All.name);
            }

            if (query.dateType === this.allDateRanges.All.type) {
                return this.$t(this.allDateRanges.All.name);
            }

            for (let dateRangeField in this.allDateRanges) {
                if (!Object.prototype.hasOwnProperty.call(this.allDateRanges, dateRangeField)) {
                    continue;
                }

                const dateRange = this.allDateRanges[dateRangeField];

                if (dateRange && dateRange.type !== this.allDateRanges.Custom.type && dateRange.type === query.dateType && dateRange.name) {
                    return this.$t(dateRange.name);
                }
            }

            if (this.$utilities.isDateRangeMatchFullYears(query.startTime, query.endTime)) {
                const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.year.short'));
                const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.year.short'));

                return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
            }

            if (this.$utilities.isDateRangeMatchFullMonths(query.startTime, query.endTime)) {
                const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.yearMonth.short'));
                const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.yearMonth.short'));

                return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
            }

            const startTimeYear = this.$utilities.getYear(this.$utilities.parseDateFromUnixTime(query.startTime));
            const endTimeYear = this.$utilities.getYear(this.$utilities.parseDateFromUnixTime(query.endTime));

            const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.date.short'));
            const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.date.short'));

            if (displayStartTime === displayEndTime) {
                return displayStartTime;
            } else if (startTimeYear === endTimeYear) {
                const displayShortEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.monthDay.short'));
                return `${displayStartTime} ~ ${displayShortEndTime}`;
            }

            return `${displayStartTime} ~ ${displayEndTime}`;
        },
        clickPieChartItem(item) {
            this.$f7router.navigate(this.$options.filters.itemLinkUrl(item, this.query, this.$constants.statistics.allChartDataTypes));
        },
        filterAccounts() {
            this.$f7router.navigate('/statistic/filter/account');
        },
        filterCategories() {
            this.$f7router.navigate('/statistic/filter/category');
        },
        settings() {
            this.$f7router.navigate('/statistic/settings');
        },
        getDataItemsByTransactions(transactionStatistics) {
            const allDataItems = {};
            let totalAmount = 0;
            let totalNonNegativeAmount = 0;

            for (let i = 0; i < transactionStatistics.items.length; i++) {
                const item = transactionStatistics.items[i];

                if (!item.primaryAccount || !item.account || !item.primaryCategory || !item.category) {
                    continue;
                }

                if (this.query.chartDataType === this.$constants.statistics.allChartDataTypes.ExpenseByAccount.type ||
                    this.query.chartDataType === this.$constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory.type ||
                    this.query.chartDataType === this.$constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory.type) {
                    if (item.category.type !== this.$constants.category.allCategoryTypes.Expense) {
                        continue;
                    }
                } else if (this.query.chartDataType === this.$constants.statistics.allChartDataTypes.IncomeByAccount.type ||
                    this.query.chartDataType === this.$constants.statistics.allChartDataTypes.IncomeByPrimaryCategory.type ||
                    this.query.chartDataType === this.$constants.statistics.allChartDataTypes.IncomeBySecondaryCategory.type) {
                    if (item.category.type !== this.$constants.category.allCategoryTypes.Income) {
                        continue;
                    }
                } else {
                    continue;
                }

                if (this.query.filterAccountIds && this.query.filterAccountIds[item.account.id]) {
                    continue;
                }

                if (this.query.filterCategoryIds && this.query.filterCategoryIds[item.category.id]) {
                    continue;
                }

                if (this.query.chartDataType === this.$constants.statistics.allChartDataTypes.ExpenseByAccount.type ||
                    this.query.chartDataType === this.$constants.statistics.allChartDataTypes.IncomeByAccount.type) {
                    if (this.$utilities.isNumber(item.amountInDefaultCurrency)) {
                        let data = allDataItems[item.account.id];

                        if (data) {
                            data.totalAmount += item.amountInDefaultCurrency;
                        } else {
                            data = {
                                name: item.account.name,
                                type: 'account',
                                id: item.account.id,
                                icon: item.account.icon || this.$constants.icons.defaultAccountIcon.icon,
                                color: item.account.color || this.$constants.colors.defaultAccountColor,
                                hidden: item.primaryAccount.hidden || item.account.hidden,
                                totalAmount: item.amountInDefaultCurrency
                            }
                        }

                        totalAmount += item.amountInDefaultCurrency;

                        if (item.amountInDefaultCurrency > 0) {
                            totalNonNegativeAmount += item.amountInDefaultCurrency;
                        }

                        allDataItems[item.account.id] = data;
                    }
                } else if (this.query.chartDataType === this.$constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory.type ||
                    this.query.chartDataType === this.$constants.statistics.allChartDataTypes.IncomeByPrimaryCategory.type) {
                    if (this.$utilities.isNumber(item.amountInDefaultCurrency)) {
                        let data = allDataItems[item.primaryCategory.id];

                        if (data) {
                            data.totalAmount += item.amountInDefaultCurrency;
                        } else {
                            data = {
                                name: item.primaryCategory.name,
                                type: 'category',
                                id: item.primaryCategory.id,
                                icon: item.primaryCategory.icon || this.$constants.icons.defaultCategoryIcon.icon,
                                color: item.primaryCategory.color || this.$constants.colors.defaultCategoryColor,
                                hidden: item.primaryCategory.hidden,
                                totalAmount: item.amountInDefaultCurrency
                            }
                        }

                        totalAmount += item.amountInDefaultCurrency;

                        if (item.amountInDefaultCurrency > 0) {
                            totalNonNegativeAmount += item.amountInDefaultCurrency;
                        }

                        allDataItems[item.primaryCategory.id] = data;
                    }
                } else if (this.query.chartDataType === this.$constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory.type ||
                    this.query.chartDataType === this.$constants.statistics.allChartDataTypes.IncomeBySecondaryCategory.type) {
                    if (this.$utilities.isNumber(item.amountInDefaultCurrency)) {
                        let data = allDataItems[item.category.id];

                        if (data) {
                            data.totalAmount += item.amountInDefaultCurrency;
                        } else {
                            data = {
                                name: item.category.name,
                                type: 'category',
                                id: item.category.id,
                                icon: item.category.icon || this.$constants.icons.defaultCategoryIcon.icon,
                                color: item.category.color || this.$constants.colors.defaultCategoryColor,
                                hidden: item.primaryCategory.hidden || item.category.hidden,
                                totalAmount: item.amountInDefaultCurrency
                            }
                        }

                        totalAmount += item.amountInDefaultCurrency;

                        if (item.amountInDefaultCurrency > 0) {
                            totalNonNegativeAmount += item.amountInDefaultCurrency;
                        }

                        allDataItems[item.category.id] = data;
                    }
                }
            }

            return {
                totalAmount: totalAmount,
                totalNonNegativeAmount: totalNonNegativeAmount,
                items: allDataItems
            }
        },
        getDataItemsByAccounts(accounts) {
            const allDataItems = {};
            let totalAmount = 0;
            let totalNonNegativeAmount = 0;

            for (let i = 0; i < accounts.length; i++) {
                const account = accounts[i];

                if (this.query.chartDataType === this.$constants.statistics.allChartDataTypes.AccountTotalAssets.type) {
                    if (!account.isAsset) {
                        continue;
                    }
                } else if (this.query.chartDataType === this.$constants.statistics.allChartDataTypes.AccountTotalLiabilities.type) {
                    if (!account.isLiability) {
                        continue;
                    }
                }

                if (this.query.filterAccountIds && this.query.filterAccountIds[account.id]) {
                    continue;
                }

                let primaryAccount = this.$store.state.allAccountsMap[account.parentId];

                if (!primaryAccount) {
                    primaryAccount = account;
                }

                let amount = account.balance;

                if (account.currency !== this.defaultCurrency) {
                    amount = Math.floor(this.$store.getters.getExchangedAmount(amount, account.currency, this.defaultCurrency));

                    if (!this.$utilities.isNumber(amount)) {
                        continue;
                    }
                }

                if (account.isLiability) {
                    amount = -amount;
                }

                const data = {
                    name: account.name,
                    type: 'account',
                    id: account.id,
                    icon: account.icon || self.$constants.icons.defaultAccountIcon.icon,
                    color: account.color || self.$constants.colors.defaultAccountColor,
                    hidden: primaryAccount.hidden || account.hidden,
                    totalAmount: amount
                };

                totalAmount += amount;

                if (amount > 0) {
                    totalNonNegativeAmount += amount;
                }

                allDataItems[account.id] = data;
            }

            return {
                totalAmount: totalAmount,
                totalNonNegativeAmount: totalNonNegativeAmount,
                items: allDataItems
            }
        }
    },
    filters: {
        chartDataTypeName(dataType, allChartDataTypes) {
            for (let chartDataTypeField in allChartDataTypes) {
                if (!Object.prototype.hasOwnProperty.call(allChartDataTypes, chartDataTypeField)) {
                    return;
                }

                if (allChartDataTypes[chartDataTypeField].type === dataType) {
                    return allChartDataTypes[chartDataTypeField].name;
                }
            }

            return 'Statistics';
        },
        totalAmountName(dataType, allChartDataTypes) {
            if (dataType === allChartDataTypes.IncomeByAccount.type || dataType === allChartDataTypes.IncomeByPrimaryCategory.type || dataType === allChartDataTypes.IncomeBySecondaryCategory.type) {
                return 'Total Income';
            } else if (dataType === allChartDataTypes.ExpenseByAccount.type || dataType === allChartDataTypes.ExpenseByPrimaryCategory.type || dataType === allChartDataTypes.ExpenseBySecondaryCategory.type) {
                return 'Total Expense';
            } else if (dataType === allChartDataTypes.AccountTotalAssets.type) {
                return 'Total Assets';
            } else if (dataType === allChartDataTypes.AccountTotalLiabilities.type) {
                return 'Total Liabilities';
            }

            return 'Total Amount';
        },
        itemLinkUrl(item, query, allChartDataTypes) {
            const querys = [];

            if (query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type) {
                querys.push('type=2');
            } else if (query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type) {
                querys.push('type=3');
            }

            if (query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type) {
                querys.push('accountId=' + item.id);
            } else if (query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type) {
                querys.push('categoryId=' + item.id);
            }

            if (query.chartDataType !== allChartDataTypes.AccountTotalAssets.type && query.chartDataType !== allChartDataTypes.AccountTotalLiabilities.type) {
                querys.push('dateType=' + query.dateType);
                querys.push('minTime=' + query.startTime);
                querys.push('maxTime=' + query.endTime);
            }

            return '/transaction/list?' + querys.join('&');
        }
    }
};
</script>

<style>
.statistics-pie-chart .pie-chart-text-group {
    fill: #fff;
    text-anchor: middle;
}

.statistics-pie-chart-total-amount-title {
    -moz-transform: translateY(0.5em);
    -ms-transform: translateY(0.5em);
    -webkit-transform: translateY(0.5em);
    transform: translateY(0.5em);
}

.statistics-pie-chart-total-amount-value {
    -moz-transform: translateY(2em);
    -ms-transform: translateY(2em);
    -webkit-transform: translateY(2em);
    transform: translateY(2em);
}

.statistics-pie-chart-total-no-data {
    -moz-transform: translateY(1.5em);
    -ms-transform: translateY(1.5em);
    -webkit-transform: translateY(1.5em);
    transform: translateY(1.5em);
}

.statistics-list-item-overview {
    padding-top: 12px;
    margin-bottom: 6px;
}

.statistics-list-item-overview-amount {
    margin-top: 2px;
    font-size: 1.5em;
}

.statistics-list-item .item-content {
    margin-top: 8px;
    margin-bottom: 12px;
}

.statistics-list-item-overview .item-inner:after, .statistics-list-item .item-inner:after {
    background-color: transparent;
}

.statistics-icon {
    margin-bottom: -2px;
}

.statistics-percent {
    font-size: 0.7em;
    opacity: 0.6;
    margin-left: 6px;
}

.statistics-item-end {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.statistics-percent-line {
    margin-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
}

.statistics-percent-line .progressbar {
    height: 4px;
    --f7-progressbar-bg-color: #f8f8f8;
}

.theme-dark .statistics-percent-line .progressbar {
    --f7-progressbar-bg-color: #161616;
}
</style>
