import { types } from 'mobx-state-tree'

const todoShape = {
  title: types.string,
  isFinished: false,
}

const todoActions = {
  toggle(){
    this.isFinished = !this.isFinished
  }
}

export const TodoModel = types.model(
  'TodoModel',
  todoShape,
  todoActions
)

const pretty = TodoModel.create({ title: 'seeking ❤' })
// this works, since 'isFinished' has a default value:
pretty.toJSON()
// outputs:
{title: "seeking ❤", isFinished: false}
// instance.toJSON() returns a POJO, not JSON
// It is just an alias of getSnapshot(instance)

const veryPretty = TodoModel.create({
  title: 'seeking ❤ too',
  isFinished: 'НЕТ'
})

Uncaught Error: [mobx-state-tree] Error while converting
`{"title":"seeking ❤ too","isFinished":"НЕТ"}` to
`TodoModel`: at path "/isFinished" value `"НЕТ"` is not
assignable to type: `boolean`.

const { // import { types } from 'mobx-state-tree'
  model, array, optional, string, union, literal
} = types

const TodosModel = model('TodosModel', {
  todos: array(TodoModel), // models are types too
  priority: union(
    ...['HIGH', 'MEDIUM', 'LOW'].map(literal)
  ),
  category: optional(string, 'Stuff to do'),
  get completedTodos(){    // computed reactive property
    return this.todos.filter(t => t.isFinished)
  },
  getTodosByTitle(title){  // view function
    return this.todos.filter(t => t.title === title)
  },
})

import { types, getEnv } from 'mobx-state-tree'
// PSEUDOCODE: not to be taken literally
const todosModelShape = {
  todos: types.array(TodoModel),
  get isLoading(){ // derived property isn't part of state
    return this.pendingRequest.state === 'pending'
  }
}
// State is volatile since it isn't part of the data
const todosModelVolatileState = { pendingRequest: null, }
// Declare actions which are MST lifecycle hooks
const todosModelActions = {
  afterCreate(){ // getEnv(instance) returns DI object
    this.pendingRequest = this.getEnv(this).fetch('//todos')
  },
  beforeDestroy(){
    // abort the request, no longer interested
    this.pendingRequest.abort()
  }
}
// Declare our model
const TodosModel= types.model('TodosModel',
  todosModelShape, todosModelVolatileState, todosModelActions
)
// Instantiate with data and DI
const myTodos = TodosModel.create(
  { todos: [] },
  { fetch: window.fetch } // real deps or mock/spies in tests
)

const TodoModel = types.model(
  { title: types.string },
  { setTitle(t){ this.title = t } }
)
const TodosModel = types.model(
  'TodosModel', { todos: types.array(TodoModel) }
)

// snapshot of nested data --> nested instances
const todos = TodosModel.create({
  todos: [{ title: 'hello world' }]
})
// Run an action on a TodoModel in TodosModel
todos[0].setTitle('great success')

// Our snapshot is just a POJO
const todoData = { title: 'test' }
// Explicit instantiation
todos.push(TodoModel.create(todoData))
// Implicit instantiation
todos.push(todoData)
// Applying a snapshot to model by mixing both
applySnapshot(todos, [...todos, todoData, ])

interface IJsonPatch {
  op: 'replace' | 'add' | 'remove'
  path: string
  value?: any
}

const TodoModel = types.model({
  id: types.identifier(),
  title: types.string
})

const TodosModel = types.model({
  todos: types.array(TodoModel),
  selectedTodo: types.reference(TodoModle)
})

const todos = TodosModel.create({
  todos: [{
    id: '47',
    title: 'A normalized snapshot'
  }],
  selectedTodo: '47'
})
// Access `selectedTodo` in a denormalized manner. Since it is a
// reference, MST returns the actual TodoModel node via matching
// identifier
console.log(todos.selectedTodo.title) // prints 'A normalized snapshot'

// If all Car instances have an id of 'Car_xyz', use MST's
// rich types to enforce it:
const { model, identifier, refinement, string } = types
const CarModel = model('CarModel', {
  id: identifier(
    refinement(string, id => id.startsWith('Car_'))
  )
})