import { injectable } from '@servicetitan/react-ioc';
import { action, makeObservable, observable } from 'mobx';

import { products } from '../../../demo/overview/products';

const getRandomPrice = () => Math.round(Math.random() * 10000) / 100;

@injectable()
export class UseObservingTableStateDemoStore {
    @observable data = products.map(p => ({
        ProductID: p.ProductID,
        ProductName: p.ProductName,
        UnitPrice: p.UnitPrice,
    }));

    constructor() {
        makeObservable(this);
    }

    @action
    updateDataKeepRoot = () => {
        this.data.forEach(p => (p.UnitPrice = getRandomPrice()));
    };

    @action
    updateDataChangeRoot = () => {
        this.data = this.data.map(p => ({
            ...p,
            UnitPrice: getRandomPrice(),
        }));
    };

    @action
    add5RowsWithUpdateDataRoot = () => {
        this.data = [
            ...this.data,
            ...Array.from({ length: 5 }).map((v, i) => ({
                ProductID: this.data.length + i + 1,
                ProductName: `Product ${this.data.length + i + 1}`,
                UnitPrice: getRandomPrice(),
            })),
        ];
    };
    @action
    remove5RowsWithUpdateDataRoot = () => {
        if (this.data.length >= 5) {
            this.data = this.data.slice(0, this.data.length - 5);
        }
    };

    @action
    add5RowsWithKeepDataRoot = () => {
        const length = this.data.length;
        for (let i = this.data.length; i < length + 5; ++i) {
            this.data.push({
                ProductID: i,
                ProductName: `Product ${i}`,
                UnitPrice: getRandomPrice(),
            });
        }
    };

    @action
    remove5RowsWithKeepDataRoot = () => {
        if (this.data.length >= 5) {
            this.data.splice(this.data.length - 5, 5);
        }
    };
}