renzholy/mongood

import { Stack, Label } from '@fluentui/react'
import { useEffect, useCallback } from 'react'
import { useAppSelector, useAppDispatch } from 'hooks/use-app'
import { actions } from 'stores'
import ProfilingPagination from './profiling-pagination'
import HostButton from './pure/host-button'

export default function ProfilingControlStack() {
  const host = useAppSelector((state) => state.profiling.host)
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(actions.profiling.resetPage())
  }, [host, dispatch])
  const handleSetHost = useCallback(
    (h: string) => {
      dispatch(actions.profiling.setHost(h))
    },
    [dispatch],
  )

  return (
    <Stack
      horizontal={true}
      tokens={{ childrenGap: 10, padding: 10 }}
      styles={{
        root: { height: 52, alignItems: 'center' },
      }}
    >
      <Label>Host:</Label>
      <HostButton host={host} setHost={handleSetHost} />
      <Stack.Item grow={true}>
        <div />
      </Stack.Item>
      <ProfilingPagination />
    </Stack>
  )
}