import { Box, Typography } from '@mui/material'
import DropDownButton from '../../DropDownButton'
import {
  StyledActionIconButton,
  StyledActionsRow,
  StyledTableActionsHeader,
} from '../common/styles'

export default function BatchActionsHeader({
  selectedRowIds,
  actions,
  clearSelection,
}) {
  const ids = Object?.keys(selectedRowIds)
  const rowActions = actions?.filter((item) => !item?.dropdown)
  const dropDownActions = actions?.filter((item) => item?.dropdown)

  if (!ids?.length) return null
  return (
    <StyledTableActionsHeader>
      <Typography variant="subtitle1">
        Selected <span>{ids?.length}</span> rows
      </Typography>
      <RowActions actions={rowActions} ids={ids} clear={clearSelection} />
      <DropDownActions
        actions={dropDownActions}
        ids={ids}
        clear={clearSelection}
      />
    </StyledTableActionsHeader>
  )
}

const RowActions = ({ actions, ids, clear }) => {
  if (!actions?.length) return null

  return (
    <StyledActionsRow>
      {actions?.map(({ component }, index) => (
        <Box key={index}>{component(ids, clear)}</Box>
      ))}
    </StyledActionsRow>
  )
}
const DropDownActions = ({ actions, ids, clear }) => {
  if (!actions?.length) return null
  return (
    <DropDownButton
      icon={{
        icon: <StyledActionIconButton />,
      }}
      menu={actions?.map((action) => ({
        ...action,
        // onClick: () => action?.onClick(ids, clear),
      }))}
    />
  )
}
