/**
 * @deprecated — no Hugo equivalent.
 * Button group with a primary action and a dropdown of secondary options.
 * Hugo's `Dropdown` is a different UX pattern — a dedicated split-button needs to be designed in Hugo first.
 */
import { useRef, useState } from 'react';

import { maxBy } from 'lodash-es';
import ArrowDropDownIcon from '@material-hu/icons/material/ArrowDropDown';
import ButtonGroup from '@material-hu/mui/ButtonGroup';
import ClickAwayListener from '@material-hu/mui/ClickAwayListener';
import Grow from '@material-hu/mui/Grow';
import MenuItem from '@material-hu/mui/MenuItem';
import MenuList from '@material-hu/mui/MenuList';
import Paper from '@material-hu/mui/Paper';
import Popper from '@material-hu/mui/Popper';

import Button, {
  type ButtonProps,
} from '@material-hu/components/design-system/Buttons/Button';

type Props = {
  options: {
    label: string;
    onClick: Function;
    default?: boolean;
  }[];
  defaultButtonProps?: ButtonProps;
  hideButtonText?: boolean;
};

function SplitButton({ options, defaultButtonProps, hideButtonText }: Props) {
  const [open, setOpen] = useState(false);
  const anchorRef = useRef(null);

  const handleMenuItemClick = option => {
    setOpen(false);
    option.onClick();
  };

  const handleToggle = () => {
    setOpen(prevOpen => !prevOpen);
  };

  const handleClose = event => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  };

  const defaultOption = options.find(option => option.default) || options[0];

  const optionsMaxWidth = `${maxBy(options, option => option.label.length).label.length + 5}ch`;

  return (
    <>
      <ButtonGroup
        variant="contained"
        ref={anchorRef}
        aria-label="split button"
      >
        <Button
          variant="contained"
          onClick={() => defaultOption.onClick()}
          {...defaultButtonProps}
          sx={{
            borderBottomRightRadius: 0,
            borderTopRightRadius: 0,
            borderRight: theme => `1px solid ${theme.palette.primary.dark}`,
            ...defaultButtonProps?.sx,
          }}
        >
          {!hideButtonText && defaultOption.label}
        </Button>
        <Button
          variant="contained"
          size="small"
          aria-controls={open ? 'split-button-menu' : undefined}
          aria-expanded={open ? 'true' : undefined}
          aria-label="select merge strategy"
          aria-haspopup="menu"
          onClick={handleToggle}
          sx={{
            borderBottomLeftRadius: 0,
            borderTopLeftRadius: 0,
          }}
        >
          <ArrowDropDownIcon />
        </Button>
      </ButtonGroup>
      <Popper
        open={open}
        anchorEl={anchorRef.current}
        role={undefined}
        transition
        placement="bottom-end"
      >
        {({ TransitionProps, placement }) => (
          <Grow
            {...TransitionProps}
            style={{
              transformOrigin:
                placement === 'bottom' ? 'center top' : 'center bottom',
            }}
          >
            <Paper sx={{ width: optionsMaxWidth }}>
              <ClickAwayListener onClickAway={handleClose}>
                <MenuList>
                  {options.map(option => (
                    <MenuItem
                      key={option.label}
                      onClick={() => handleMenuItemClick(option)}
                    >
                      {option.label}
                    </MenuItem>
                  ))}
                </MenuList>
              </ClickAwayListener>
            </Paper>
          </Grow>
        )}
      </Popper>
    </>
  );
}

export default SplitButton;