import AggregatedToolUsage from '@/analyst/ToolUsage/AggregatedToolUsage'
import InTimeToolUsage from '@/analyst/ToolUsage/InTimeToolUsage'
import SelectedContext from '@/analyst/ToolUsage/SelectedContext'
import Selectors from '@/analyst/ToolUsage/Selectors'
import ToolArgumentUsage from '@/analyst/ToolUsage/ToolArgumentUsage'
import selectedReducer from '@/analyst/ToolUsage/selectedReducer'
import { useParams } from '@/router'
import { Divider } from '@blueprintjs/core'
import { css } from '@emotion/css'
import { useEffect, useMemo, useReducer } from 'react'

const page = css`
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto 1fr;

  @media (max-width: 120rem) {
    height: clamp(100%, 120rem, 200%);
    grid-template-rows: auto auto 1fr auto 2fr;
  }
`

const top = css`
  overflow: hidden;
`

const bottom = css`
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: unset;

  @media (max-width: 120rem) {
    grid-template-columns: unset;
    grid-template-rows: 1fr auto 1fr;
  }
`

const bottomElement = css`
  overflow: auto;
`

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

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

  const selectedContextValue = useMemo(
    () => ({ selectedReducer: reducer }),
    [reducer]
  )

  return (
    <>
      <SelectedContext.Provider value={selectedContextValue}>
        <div className={page}>
          <Selectors />

          <Divider />

          <div className={top}>
            <InTimeToolUsage />
          </div>

          <Divider />

          <div className={bottom}>
            <div className={bottomElement}>
              <AggregatedToolUsage />
            </div>

            <Divider />

            <div className={bottomElement}>
              <ToolArgumentUsage />
            </div>
          </div>
        </div>
      </SelectedContext.Provider>
    </>
  )
}

export default Home
