import styled from '@emotion/styled';
import { noop } from 'lodash-es';
import React from 'react';

import {
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuItemMainText,
  ContextMenuTrigger,
} from '@/components/contextMenu/ContextMenu';
import { Tooltip } from '@/components/tooltip/Tooltip';
import { ChevronDownIcon, CreateIcon, RemixIcon, RepeatIcon } from '@/icons';

import { ButtonShape, ButtonVariant } from '../../button/Button';
import { MainButton } from './components';

const SplitButtonWrapper = styled.div`
  display: flex;
  gap: 1px;
  align-items: stretch;
`;

const SplitButtonMain = styled(MainButton)`
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
`;

const SplitButtonDropdown = styled(MainButton)`
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 8px;
  padding-right: 8px;
  width: 40px;
  height: 40px;
`;

type ModeMenuContentsProps = {
  onClose: () => void;
  onSelectMode: (mode: 'create' | 'cover' | 'recreate') => void;
  currentMode: 'create' | 'cover' | 'recreate';
  showRecreate?: boolean;
  showCover?: boolean;
};

const ModeMenuContents = ({
  onClose,
  onSelectMode,
  currentMode,
  showRecreate = false,
  showCover = false,
}: ModeMenuContentsProps) => {
  return (
    <ContextMenuGroup>
      <Tooltip
        label={
          <>
            Plays along with surrounding content.
            <br />
            Does not reference the selected content.
          </>
        }
        placement='left'
      >
        <ContextMenuItem
          className='bg-transparent'
          icon={<CreateIcon className='h-4 w-4' />}
          onClick={() => {
            onSelectMode('create');
            onClose();
          }}
        >
          <ContextMenuItemMainText>
            Replace{currentMode === 'create' ? ' ✓' : ''}
          </ContextMenuItemMainText>
        </ContextMenuItem>
      </Tooltip>
      {showCover && (
        <Tooltip
          label={
            <>
              Plays along with surrounding content.
              <br />
              References the current selected content.
            </>
          }
          placement='left'
        >
          <ContextMenuItem
            className='bg-transparent'
            icon={<RemixIcon className='h-4 w-4' />}
            onClick={() => {
              onSelectMode('cover');
              onClose();
            }}
          >
            <ContextMenuItemMainText>
              Cover{currentMode === 'cover' ? ' ✓' : ''}
            </ContextMenuItemMainText>
          </ContextMenuItem>
        </Tooltip>
      )}
      {showRecreate && (
        <Tooltip
          label='Create a new clip, playing along with the same context as the selected clip.'
          placement='left'
        >
          <ContextMenuItem
            className='bg-transparent'
            icon={<RepeatIcon className='h-4 w-4' />}
            onClick={() => {
              onSelectMode('recreate');
              onClose();
            }}
          >
            <ContextMenuItemMainText>
              Recreate{currentMode === 'recreate' ? ' ✓' : ''}
            </ContextMenuItemMainText>
          </ContextMenuItem>
        </Tooltip>
      )}
    </ContextMenuGroup>
  );
};

type ContextualBarSplitButtonProps = {
  onMouseEnter: (e: React.MouseEvent) => void;
  onMouseLeave: (e: React.MouseEvent) => void;
  submitText: string;
  isGenerating: boolean;
  disabledReason?: string;
  currentMenuMode: 'create' | 'cover' | 'recreate';
  onSubmit: () => void;
  onSelectMode: (mode: 'create' | 'cover' | 'recreate') => void;
  menuPlacement?: 'top-right' | 'bottom-right';
  SpinnerComponent: React.ComponentType;
  showRecreate?: boolean;
  showCover?: boolean;
};

export default function ContextualBarSplitButton({
  onMouseEnter = noop,
  onMouseLeave = noop,
  submitText,
  isGenerating,
  disabledReason,
  currentMenuMode,
  onSubmit,
  onSelectMode,
  menuPlacement = 'bottom-right',
  SpinnerComponent,
  showRecreate = false,
  showCover = false,
}: ContextualBarSplitButtonProps) {
  const buttonStyle =
    currentMenuMode === 'cover'
      ? ({ filter: 'hue-rotate(255deg)' } as React.CSSProperties)
      : currentMenuMode === 'recreate'
        ? ({ filter: 'hue-rotate(310deg)' } as React.CSSProperties)
        : undefined;

  return (
    <SplitButtonWrapper>
      <SplitButtonMain
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        variant={ButtonVariant.Aura}
        shape={ButtonShape.Pill}
        style={buttonStyle}
        disabled={isGenerating || !!disabledReason}
        icon={isGenerating ? <SpinnerComponent /> : <CreateIcon />}
        onClick={onSubmit}
      >
        {submitText}
      </SplitButtonMain>
      <ContextMenuTrigger
        ButtonComponent={(triggerProps) => (
          <SplitButtonDropdown
            variant={ButtonVariant.Aura}
            shape={ButtonShape.Pill}
            style={buttonStyle}
            disabled={isGenerating || !!disabledReason}
            icon={<ChevronDownIcon className='h-3 w-3' />}
            {...triggerProps}
          />
        )}
        ContentsComponent={(contentsProps) => (
          <ModeMenuContents
            {...contentsProps}
            currentMode={currentMenuMode}
            onSelectMode={onSelectMode}
            showRecreate={showRecreate}
            showCover={showCover}
          />
        )}
        placement={menuPlacement}
      />
    </SplitButtonWrapper>
  );
}