import { forwardRef } from 'react';
import { Box, Paper, Typography } from '@mui/material';
import { CustomCheckbox } from '../StyledCheckbox';

export const OrgUnitsAutocompletePaper = forwardRef(
  function OrgUnitsAutocompletePaper(
    {
      children,
      onSelectAll,
      isAllSelected,
      isIndeterminate,
      showSelectAll,
      ...other
    },
    ref,
  ) {
    return (
      <Paper ref={ref} {...other}>
        {showSelectAll && (
          <Box
            onMouseDown={(event) => event.preventDefault()}
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 0.5,
              px: 2,
              py: 1,
              borderBottom: '1px solid',
              borderColor: 'divider',
            }}
          >
            <CustomCheckbox
              checked={isAllSelected}
              indeterminate={isIndeterminate}
              onChange={(event) => onSelectAll(event.target.checked)}
            />
            <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>
              Выделить все
            </Typography>
          </Box>
        )}
        {children}
      </Paper>
    );
  },
);
