import { useContextSelector } from '@/hooks/useContextSelector';
import { CheckboxIcon, CheckboxOutlineIcon } from '@/icons';

import { ButtonVariant } from '../button/Button';
import {
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuItemSubtext,
} from '../contextMenu/ContextMenu';
import { Tooltip } from '../tooltip/Tooltip';
import PlusMinusInput from './PlusMinusInput';
import StudioContext from './StudioContext';
import TransportPopup from './TransportPopup';
import {
  MAX_BPM,
  MIN_BPM,
  activateFollowTrackTiming,
  activateManualTiming,
} from './actions/setTiming';
import {
  getCanSelectFollowTrackTiming,
  getFallbackBPS,
  getTimingType,
} from './selectors';

export default function TempoPopup({ onClose }: { onClose: () => void }) {
  const baseTimingType = useContextSelector(StudioContext, (ctx) =>
    getTimingType(ctx.state)
  );
  const fallbackBPS = useContextSelector(StudioContext, (ctx) =>
    getFallbackBPS(ctx.state)
  );
  const canSelectFollowTrackTiming = useContextSelector(StudioContext, (ctx) =>
    getCanSelectFollowTrackTiming(ctx.state)
  );
  const setState = useContextSelector(StudioContext, (ctx) => ctx.setState);
  return (
    <TransportPopup title={<>Tempo</>} onClose={onClose}>
      <ContextMenuGroup>
        <Tooltip
          label={
            canSelectFollowTrackTiming ? '' : 'Requires at least one track'
          }
          placement='right'
        >
          <ContextMenuItem
            keepMenusOpen
            variant={ButtonVariant.Tertiary}
            disabled={!canSelectFollowTrackTiming}
            icon={
              baseTimingType === 'follow-track'
                ? CheckboxIcon
                : CheckboxOutlineIcon
            }
            onClick={() => {
              setState(activateFollowTrackTiming());
            }}
          >
            Follow Track{' '}
            <ContextMenuItemSubtext>(May Fluctuate)</ContextMenuItemSubtext>
          </ContextMenuItem>
        </Tooltip>
        <ContextMenuItem
          keepMenusOpen
          variant={ButtonVariant.Tertiary}
          icon={
            baseTimingType === 'manual' ? CheckboxIcon : CheckboxOutlineIcon
          }
          onClick={() => {
            setState(activateManualTiming());
          }}
        >
          Manual BPM{' '}
          <ContextMenuItemSubtext>(Consistent)</ContextMenuItemSubtext>
        </ContextMenuItem>
      </ContextMenuGroup>

      <ContextMenuGroup className='!p-2'>
        <PlusMinusInput
          autoFocus
          plusTransform={(prev) => prev + 1}
          minusTransform={(prev) => prev - 1}
          disabled={baseTimingType !== 'manual'}
          value={fallbackBPS * 60}
          onChange={(value) => {
            setState(activateManualTiming(value / 60));
          }}
          min={MIN_BPM}
          max={MAX_BPM}
        />
      </ContextMenuGroup>
    </TransportPopup>
  );
}