// hooks/ui.js
import React, { useState, useMemo, useCallback } from 'react'

const useTab = (tabDataList) => {
  const [tabList, setTabList] = useState(tabDataList) // [{id: 'merlin', name: 'merlin', content: <Merlin/>, actived: true}]
 
  // action 하는 함수들
  // tab을 추가 하려 할때
  const addTabList = useCallback((tabData) => {
    // 함수형 업데이트 
    setTabList(tabList => [
      ...tabList,
      tabData
    ])
  }, [])


  // 탭 눌렀을때 
  const onHandleTabClick = useCallback((tabId) => {
    // tabName 이 맞는게 있으면 그걸 true 바꾸고 나머지 false
    // 맞는게 없으면 그대로 두자.
    // 함수형 업데이트
    setTabList(tabList => {
      if(tabList.some(tabData => tabData.id === tabId)) {
        return tabList.map((tabData, index) => {
          tabData.actived = (tabData.id === tabId)
          return tabData
        })
      }
      return tabList
    })
  }, [])

  // Computed 한 값
  // 현재 탭 index 
  const currentTabIndex = useMemo(() => {
    return tabList.findIndex(tabData => tabData.actived)
  }, [tabList])
  // 전체 탭 갯수 
  const tabLength = useMemo(() => {
    return tabList && tabList.length || 0
  }, [tabList])


  return {
    currentTabIndex,
    tabLength,
    tabList,
    onHandleTabClick,
    initTabList,
    addTabList
  }
}

export { useTab }

// TabWrapper.js
import React from 'react'
import { useTab } from 'hooks/ui'

const TabWrapper = () => {
  const {
    currentTabIndex,
    tabLength,
    tabList,
    onHandleTabClick,
    initTabList
    } = useTab([
    {id: 'merlin', name: 'merlin', content: <Merlin />, actived: true},
    {id: 'ho', name:'ho', content: <Ho />, actived: false}
  ])

  return (
    <>
      <TabList activedIndex={currentTabIndex} onClickTab={onHandleTabClick}>
      <TabContents activedTabContent={tabList.content}>
    </>
  )
}

// Context 기본 포멧
// TodoContext.js
import React, { useState, createContext } from 'react'

const TodoContext = createContext()

const TodoProvider = ({}) => {
  // 상태
  const [todoList, setTodoList] = useState([])
  // 액션
  const addTodo = () => {}
  const removeTodo = () => {}

  // Bad!!
  // const store = {
  //   name: 'merlin',
  //   setName: () => {}
  // }
  
  // (...)

  const todoStore = useMemo(() => ({
    todoList,
    addTodo,
    removeTodo,
  }), [todoList])

  return <TodoContext.Provider value={todoStore}>{children}</TodoContext.Provider>
}


export { TodoProvider }
export default TodoContext

// useTodo.js
import React, { useState, useMemo } from 'react'

const useTodo = () => {
  const [todoList, setTodoList] = useState([])
  const addTodo = () => {}
  const removeTodo = () => {}

  // (...)

  const todoStore = useMemo(() => ({
    todoList,
    addTodo,
    removeTodo,
  }), [todoList])

  return TodoStore
}

// TodoContext.js
import React, { useState, createContext } from 'react'
import useTodo from 'useTodo'

const TodoContext = createContext()

const TodoProvider = ({}) => {
  const todoStore = useTodo()

  return <TodoContext.Provider value={todoStore}>{children}</TodoContext.Provider>
}


export { TodoProvider }

export default TodoContext

// util.js
// Context value 값을 어떻게 매핑할지 정의하는 함수와 적용할 컴포넌트를 인자로 받아 새로운 컴포넌트를 만들어 주는 HOC

export const createWithProvider = (
  Context,
  Provider
) => mapContextToProps => WrappedComponent => {

  const UseContextComponent = props => {
    const contextValue = mapContextToProps(useContext(Context))
    return <WrappedComponent {...contextValue} {...props}></WrappedComponent>
  }

  const withProvier = props => {
    return (
      <Provider>
        <UseContextComponent {...props}></UseContextComponent>
      </Provider>
    )
  }

  const displayName =
    WrappedComponent.displayName || WrappedComponent.name || 'component'
  withProvier.displayName = displayName

  return withProvier
}

// TodoContext.js

import React, { useState, createContext } from 'react'
import useTodo from 'useTodo'

const TodoContext = createContext()

const TodoProvider = ({}) => {
  const todoStore = useTodo()

  return <TodoContext.Provider value={todoStore}>{children}</TodoContext.Provider>
}
// Context value 값을 어떻게 매핑할지 정의하는 함수와 적용할 컴포넌트를 인자로 받아 새로운 컴포넌트를 만들어 주는 HOC
const withTodoProvider = createWithProvider(TodoContext, TodoProvider)

export { TodoProvider, withTodoProvider }

export default TodoContext

// TodoContainer.js

import Todo from '../organisms/todo/Todo'
import { withTodoProvider } from '../../context/TodoContext'

// Todo organism의 props에 Context value 값을 매핑
export default withTodoProvider(({ todoList, actions }) => ({
  todoList,
  actions,
}))(Todo)

import React, {memo} from 'react'

const TodoItem = ({todoList, onClick}) => {
  return (
    <div>TodoItem</div>
  )
}

export default memo(TodoItem)

import React, {memo} from 'react'

const TodoItem = ({todoList, onClick}) => {
  return (
    <div>TodoItem</div>
  )
}

export default memo(TodoItem, (prevProps, nextProps) => prevProps.todoList === )