// Реализуем паттерн Render Props через обычные функции.
// В React children — функция. Здесь — любой callback.

// --- Компонент 1: Toggle (управляет булевым состоянием) ---

function createToggle(initialOn = false) {
  let on = initialOn
  const listeners = []

  function notify() {
    listeners.forEach(fn => fn({ on, toggle, turnOn, turnOff }))
  }

  function toggle() {
    on = !on
    notify()
  }

  function turnOn()  { on = true;  notify() }
  function turnOff() { on = false; notify() }

  // "render" = вызов children-функции с текущим состоянием
  function render(childrenFn) {
    return childrenFn({ on, toggle, turnOn, turnOff })
  }

  // subscribe = аналог useEffect для реактивности
  function subscribe(fn) { listeners.push(fn) }

  return { render, toggle, turnOn, turnOff, subscribe }
}

console.log('=== Toggle с render prop ===')
const toggle1 = createToggle(false)

// "Рендерим" разные UI с одним состоянием
const ui1 = toggle1.render(({ on, toggle }) =>
  'Кнопка: [' + (on ? '● ВКЛ' : '○ ВЫКЛ') + '] (click=toggle)'
)
console.log(ui1)  // [○ ВЫКЛ]

toggle1.toggle()

const ui2 = toggle1.render(({ on, turnOff }) =>
  'Чекбокс: ' + (on ? '☑' : '☐') + ' Тёмная тема | Кнопка [Сбросить]'
)
console.log(ui2)  // ☑ Тёмная тема

// --- Компонент 2: DataFetcher (управляет загрузкой данных) ---

function createDataFetcher(fetchFn) {
  let state = { data: null, isLoading: false, error: null }

  async function load(params) {
    state = { data: null, isLoading: true, error: null }

    try {
      const data = await fetchFn(params)
      state = { data, isLoading: false, error: null }
    } catch (err) {
      state = { data: null, isLoading: false, error: err.message }
    }
    return state
  }

  // render prop — вызывается с текущим состоянием
  function render(childrenFn) {
    return childrenFn(state)
  }

  return { load, render }
}

// Использование 1: список пользователей
async function testDataFetcher() {
  const fakeApi = (endpoint) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (endpoint === '/users') {
          resolve([
            { id: 1, name: 'Алексей' },
            { id: 2, name: 'Мария' },
          ])
        } else {
          reject(new Error('404 Not Found'))
        }
      }, 50)
    })
  }

  const fetcher1 = createDataFetcher(fakeApi)

  console.log('
=== DataFetcher: состояния загрузки ===')

  // До загрузки
  await fetcher1.load('/users')
  const result = fetcher1.render(({ data, isLoading, error }) => {
    if (isLoading) return '[Загрузка...]'
    if (error)     return '[Ошибка: ' + error + ']'
    return '[Список: ' + data.map(u => u.name).join(', ') + ']'
  })
  console.log('Результат:', result)  // [Список: Алексей, Мария]

  // Ошибка
  const fetcher2 = createDataFetcher(fakeApi)
  await fetcher2.load('/nonexistent')
  const errorResult = fetcher2.render(({ error }) =>
    error ? '[Ошибка: ' + error + ']' : '[Данные]'
  )
  console.log('Ошибка:', errorResult)
}

// --- Компонент 3: SortableList (render props для строк) ---

function createSortableList(items) {
  let sortedItems = [...items]
  let sortKey = null
  let sortDir = 'asc'

  function sortBy(key) {
    if (sortKey === key) {
      sortDir = sortDir === 'asc' ? 'desc' : 'asc'
    } else {
      sortKey = key
      sortDir = 'asc'
    }

    sortedItems = [...items].sort((a, b) => {
      const val = sortDir === 'asc'
        ? String(a[key]).localeCompare(String(b[key]))
        : String(b[key]).localeCompare(String(a[key]))
      return val
    })
  }

  // render prop: renderRow вызывается для каждого элемента
  function render(renderRow) {
    return sortedItems.map(renderRow)
  }

  return { sortBy, render }
}

console.log('
=== SortableList с render prop ===')
const list = createSortableList([
  { name: 'Мария', city: 'Москва' },
  { name: 'Алексей', city: 'СПб' },
  { name: 'Ирина', city: 'Казань' },
])

console.log('Исходный порядок:')
list.render(item => console.log(' -', item.name, '|', item.city))

list.sortBy('name')
console.log('
Сортировка по имени:')
list.render(item => console.log(' -', item.name, '|', item.city))

testDataFetcher()