import { observable, computed, type ObservableObject } from "@legendapp/state";
import { observer } from "@legendapp/state/react";

interface ItemState {
  name: string;
  amount: number;
  isLoading: boolean;
}

export class ItemModel {
  obs: ObservableObject<ItemState>;

  constructor() {
    this.obs = observable<ItemState>({
      name: "",
      amount: 0,
      isLoading: false,
    });
  }

  // Computed values
  formattedAmount = computed(() => {
    return `$${this.obs.amount.get().toFixed(2)}`;
  });

  // Actions
  setName = (name: string) => {
    this.obs.name.set(name);
  };

  loadData = async () => {
    this.obs.isLoading.set(true);
    try {
      const data = await fetchData();
      this.obs.set(data);
    } finally {
      this.obs.isLoading.set(false);
    }
  };
}

// Get current value (reactive)
const name = obs.name.get();

// Get without tracking (non-reactive)
const name = obs.name.peek();

// Set value
obs.name.set("New Name");

// Set with callback
obs.amount.set((prev) => prev + 10);

const obs = observable({
  user: { name: "John", settings: { theme: "dark" } }
});

// Direct access
obs.user.settings.theme.set("light");

// Get nested value
const theme = obs.user.settings.theme.get();

const list = observable<Item[]>([]);

// Add item
list.push(newItem);

// Filter (returns new array, doesn't mutate)
const filtered = list.get().filter(item => item.active);

// Set filtered result
list.set(filtered);

import { observer, useMount } from "@legendapp/state/react";

const ItemView = observer(({ model }: { model: ItemModel }) => {
  // Automatically re-renders when observables change
  const name = model.obs.name.get();
  const amount = model.formattedAmount.get();

  useMount(() => {
    model.loadData();
    return () => model.cleanup?.();
  });

  return <Text>{name}: {amount}</Text>;
});

class ItemModel {
  listeners: ObservableListenerDispose[] = [];

  onMount = () => {
    const listener = this.obs.name.onChange(({ value }) => {
      console.log("Name changed:", value);
    });
    this.listeners.push(listener);
  };

  onUnmount = () => {
    while (this.listeners.length > 0) {
      const dispose = this.listeners.pop();
      dispose?.();
    }
  };
}

interface ItemDraft {
  id?: string;  // Optional for new items
  name: string;
  amount: number;
}

class ItemFormModel {
  draft = observable<ItemDraft>({
    name: "",
    amount: 0,
  });

  save = async () => {
    const data = this.draft.peek();
    if (data.id) {
      await updateItem(data);
    } else {
      await createItem(data);
    }
  };

  reset = () => {
    this.draft.set({ name: "", amount: 0 });
  };
}

// src/LegendState/index.ts
class RootStore {
  itemModel = new ItemModel();
  categoryModel = new CategoryModel();
  
  actions = {
    startServices: async () => {
      await Promise.all([
        this.itemModel.loadData(),
        this.categoryModel.loadData(),
      ]);
    },
  };
}

export const rootStore = new RootStore();