---

import classNames from 'classnames';
import { PropsWithChildren, RefObject } from 'react';

import { Button } from '@src/components/Button';
import { DropdownPosition } from '@src/components/Dropdown/types';
import SmallChevronLeftIcon from '@src/components/Icon/SmallChevronLeft';
import { Tooltip } from '@src/components/Tooltip';

import { Dropdown } from '../Dropdown';

import styles from './index.module.scss';

interface SplitDropdownProps extends PropsWithChildren {
  position?: DropdownPosition;

  mainContent: JSX.Element;
  menuButtonContent?: JSX.Element;

  mainTooltip?: string;
  menuTooltip?: string;

  anchorRef?: RefObject<HTMLDivElement>;
  onMainClick?: () => void;

  mainButtonClassName?: string;
  mainButtonPressed?: boolean;
  tooltipClassName?: string;
}

export default function SplitDropdown({
  position = 'right',
  mainContent,
  menuButtonContent = <SmallChevronLeftIcon />,
  mainTooltip,
  menuTooltip,
  anchorRef,
  onMainClick,
  mainButtonClassName = '',
  mainButtonPressed = false,
  tooltipClassName,
  children,
}: SplitDropdownProps) {
  return (
    <Dropdown
      position={position}
      anchorRef={anchorRef}
      buttonClassName={mainButtonClassName}
      renderTrigger={({ isOpen, onToggle }) => (
        <div
          className={classNames(styles.dropdown, {
            [styles.open]: isOpen,
          })}
        >
          <Tooltip
            tooltipClassName={classNames(styles.tooltip__main, tooltipClassName)}
            showMessageOnFocus={!isOpen}
            location="right"
            label={mainTooltip}
          >
            <Button
              className={mainButtonClassName}
              pressed={mainButtonPressed || isOpen}
              onClick={onMainClick}
              label={mainContent}
            />
          </Tooltip>

          <Tooltip
            tooltipClassName={tooltipClassName}
            showMessageOnFocus={!isOpen}
            location="right"
            label={menuTooltip}
          >
            <Button
              className={styles.menu_button}
              pressed={isOpen}
              onClick={onToggle}
              label={menuButtonContent}
            />
          </Tooltip>
        </div>
      )}
    >
      {children}
    </Dropdown>
  );
}

















.dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
  width: var(--space-2000);
  height: var(--space-2000);

  &:hover .menu_button,
  &:focus-within .menu_button,
  &.open .menu_button {
    opacity: 1;
    pointer-events: auto;
  }

  &.open {
    .menu_button {
      div {
        p {
          svg {
            transform: rotate(0deg);
          }
        }
      }
    }
  }

  .menu_button {
    min-width: var(--space-0625);
    padding: 0;
    opacity: 0;
    border-radius: var(--space-0125);
    pointer-events: none;

    div {
      p {
        svg {
          width: var(--space-0625);
          height: var(--space-0625);
          transform: rotate(-180deg);
        }
      }
    }
  }
}

.tooltip__main {
  margin-left: var(--space-0375);
}