'use client'

import { Fragment } from 'react'

import { useDataCtx } from './provider'

export default function ViewLayout() {
  const { data } = useDataCtx()
  console.log(data)

  return (
    <Fragment>
      <div key='root' className='indent-0'>
        Root
      </div>
    </Fragment>
  )
}

/*
import { Fragment, useReducer } from 'react'

import { Ressource, useDataCtx } from './provider'
import { reducer, useReducerCtx, ReducerCtx } from './reducer'

const ViewRessource = ({ ressource }: { ressource: Ressource }) => {
  const {
    state: { config },
    dispatch,
  } = useReducerCtx()

  const fetchFile = (ressource: Ressource) => {
    console.log(ressource)
  }

  if (ressource.isDir) {
    return ressource.isVisible ? (
      <div
        style={{
          marginLeft: `${ressource.depth * config.indent}px`,
          fontWeight: 'bolder',
        }}
        onClick={() => dispatch({ type: 'clickOnDir', ressource })}
      >
        {ressource.name}
      </div>
    ) : null
  } else {
    return ressource.isVisible ? (
      <div
        style={{
          marginLeft: `${ressource.depth * config.indent}px`,
          fontWeight: 'normal',
        }}
        onClick={() => fetchFile(ressource)}
      >
        {ressource.name}
      </div>
    ) : null
  }
}

const View = () => {
  const { state } = useReducerCtx()

  return state.ressources ? (
    <Fragment>
      {state.ressources.map(ressource => (
        <ViewRessource key={ressource.path} ressource={ressource} />
      ))}
    </Fragment>
  ) : null
}

export default function ViewLayout() {
  const { data } = useDataCtx()
  const [state, dispatch] = useReducer(reducer, data)

  return (
    <ReducerCtx.Provider value={{ state, dispatch }}>
      <Fragment>
        <div key='root' className='indent-0'>
          Root
        </div>
        <View />
      </Fragment>
    </ReducerCtx.Provider>
  )
}
*/