import Milestones from '@/analyst/Milestones'
import Overview from '@/analyst/Overview'
import selectedReducer from '@/analyst/Overview/selectedReducer'
import { useParams } from '@/router'
import { Divider } from '@blueprintjs/core'
import { css } from '@emotion/css'
import { useEffect, useReducer } from 'react'

const page = css`
  display: flex;
  flex-direction: column;
  min-height: 100%;
`

const Home = () => {
  const reducer = useReducer(selectedReducer, {})
  const [state, dispatch] = reducer

  const { exerciseId } = useParams('/analyst/:exerciseId')
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => dispatch({ type: 'resetSelection' }), [exerciseId])

  return (
    <div className={page}>
      <Milestones
        selectedState={state.milestoneState}
        selectedDispatch={dispatch}
      />
      <Divider />
      <Overview selectedState={state} selectedDispatch={dispatch} />
    </div>
  )
}

export default Home
