/* eslint-disable react/no-array-index-key */
import cx from "../../../../utils/css/cx.js";
import { useContainerBreakpointIsAtMost } from "../../../../hooks/breakpoint/index.js";
import useTooltip from "../../../../hooks/useTooltip/index.js";
import { TooltipTrigger } from "../../../structure/index.js";
import Cell from './Cell';
import useBopGrid from './useBopGrid';
import BopTooltip from './BopTooltip';
import CellWrapper from './CellWrapper';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Bar = function Bar(props) {
  const {
    collectionId,
    forceSimpler
  } = props;
  const simpler = useContainerBreakpointIsAtMost('sm') || forceSimpler;
  const grid = useBopGrid(collectionId);
  const tooltip = useTooltip({
    content: BopTooltip,
    displayProps: {
      edge: 'sharp',
      shadow: '100',
      padding: '4'
    }
  });
  if (!grid) {
    return null;
  }
  return <div className={cls('bar', {
    simpler
  })}>
      {grid.map((g, yIdx) => <div key={yIdx} className={cls('column', {
      simpler
    })}>
          {g.map((_, xIdx) => <TooltipTrigger key={`${xIdx}-${yIdx}`} active={!simpler} as={CellWrapper} tooltip={tooltip} props={{
        ...grid[yIdx][xIdx]
      }}>
              <Cell {...grid[yIdx][xIdx]} simpler={simpler} />
            </TooltipTrigger>)}
        </div>)}
    </div>;
};
export default Bar;