import { injectable, inject } from '@servicetitan/react-ioc';

import { observable, action, observe, computed, Lambda, makeObservable } from 'mobx';

import { TableState } from '../..';

import { MasterTableStore } from './master-table.store';

import type { Product } from './product';
import type { ProductDetail } from './product-detail';

@injectable()
export class DetailTableStore {
    @observable tableState?: TableState<ProductDetail, string, Product, number>;

    /*
     * Please use constructor injection instead.
     * Injecting without constructor only to make it work in Codesandbox.
     */
    @inject(MasterTableStore)
    private masterTableStore!: MasterTableStore;

    @computed get selected() {
        return this.tableState?.selectedIds.size ?? 0;
    }

    private disposeSelectedObserve: Lambda;

    constructor() {
        makeObservable(this);

        this.disposeSelectedObserve = observe(this, 'selected', ({ oldValue, newValue }) => {
            if (!oldValue && newValue) {
                this.setLockedRowsSelection(true);
            }
        });
    }

    @action
    initialize(row: Product) {
        this.tableState = this.masterTableStore.tableState.getDetailTableState!(row) as TableState<
            ProductDetail,
            string,
            Product,
            number
        >;
    }

    dispose() {
        this.disposeSelectedObserve();
    }

    private async setLockedRowsSelection(value: boolean) {
        if (!this.tableState) {
            return;
        }

        if (!this.tableState.dataSource) {
            return;
        }

        const filteredData = (
            await this.tableState.dataSource.getData({
                filter: this.tableState.filter,
            })
        ).data as ProductDetail[];

        const lockedData = filteredData.filter(row => this.tableState!.isRowUnselectable(row));

        this.tableState.setRowsSelection(lockedData, value, { ignoreUnselectable: false });
    }
}