import { useCallback, useState } from 'react';

import { useContextSelector } from '@/hooks/useContextSelector';
import { CaretUpIcon, Volume0Icon, VolumeOnIcon } from '@/icons';

import Button, { ButtonVariant } from '../button/Button';
import Modal from '../modal/Modal';
import NotificationDot from '../notification/NotificationDot';
import TextareaV2 from '../textarea/TextareaV2';
import { Tooltip } from '../tooltip/Tooltip';
import StudioContext from './StudioContext';
import {
  ColoredBorder,
  Grid,
  HeaderRow,
  Outline,
  TrackBorderItem,
  TrackHeaderButton,
  TrackNameContainer,
  Wrapper,
} from './StudioTrackHeader';
import { combineActions } from './actions/combineActions';
import { selectTrackIds } from './actions/dragSelect';
import focusTracks from './actions/focusTracks';
import renameTakeLane from './actions/renameTakeLane';
import toggleTakeLaneSolo from './actions/toggleTakeLaneSolo';
import toggleTakeLanes from './actions/toggleTakeLanes';
import { getTakeLanesById, getTracksById } from './selectors';

export default function StudioTakeLaneHeader({
  trackId,
  takeLaneId,
  isLastTakeLane,
}: {
  trackId: string;
  takeLaneId: string;
  isLastTakeLane: boolean;
}) {
  const trackName = useContextSelector(
    StudioContext,
    (context) => getTakeLanesById(context.state)[takeLaneId].name
  );
  const trackColor = useContextSelector(
    StudioContext,
    (context) => getTracksById(context.state)[trackId].color
  );
  const focused = useContextSelector(
    StudioContext,
    (context) =>
      context.state.selection.focusedTrackId === takeLaneId &&
      context.state.selection.focusedArea === 'tracks'
  );
  const selected = useContextSelector(StudioContext, (context) =>
    context.state.selection.trackIds.includes(takeLaneId)
  );
  const setState = useContextSelector(
    StudioContext,
    (context) => context.setState
  );
  const collapseTakeLanes = useCallback(() => {
    setState(toggleTakeLanes(trackId));
  }, [setState, trackId]);
  const handleClick = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      setState(
        combineActions(
          focusTracks,
          selectTrackIds(takeLaneId, takeLaneId, takeLaneId, e.shiftKey)
        )
      );
    },
    [setState, takeLaneId]
  );
  const [newName, setNewName] = useState(trackName ?? '');
  const [renaming, setRenaming] = useState(false);
  const isSoloed = useContextSelector(
    StudioContext,
    (context) =>
      context.state.tracks.find((t) => t.id === trackId)?.soloTakeLaneId ===
      takeLaneId
  );
  const toggleSolo = useCallback(() => {
    setState(toggleTakeLaneSolo(takeLaneId));
  }, [setState, takeLaneId]);
  const heard = useContextSelector(
    StudioContext,
    (context) =>
      !context.unheardTakeLanesController.unheardTakeLanes[takeLaneId]
  );
  return (
    <Wrapper selected={selected} onClick={handleClick}>
      <ColoredBorder
        style={{
          backgroundImage: `linear-gradient(to right, transparent 0px, transparent 20px, ${trackColor} 20px)`,
          justifyContent: 'flex-end',
        }}
      >
        {isLastTakeLane && (
          <Tooltip label='Hide Take Lanes' openDelay={500}>
            <TrackBorderItem
              className='absolute inset-0 text-foreground-primary opacity-25 transition-all duration-200 hover:opacity-100'
              onClick={(e) => {
                e.stopPropagation();
                collapseTakeLanes();
              }}
            >
              <CaretUpIcon className='relative right-0.5 h-4 w-4' />
            </TrackBorderItem>
          </Tooltip>
        )}
      </ColoredBorder>
      {renaming && (
        <Modal onClose={() => setRenaming(false)} title='Rename Take Lane'>
          <TextareaV2
            autoFocus
            onFocus={(e) => {
              e.target.select();
            }}
            placeholder='Enter new track name'
            rows={1}
            resize={false}
            value={newName}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                e.preventDefault();
                setState(renameTakeLane(takeLaneId, newName));
                setRenaming(false);
              }
            }}
            onChange={(e) => setNewName(e.target.value)}
          />
          <Button
            className='mt-4'
            variant={ButtonVariant.Primary}
            onClick={() => {
              setState(renameTakeLane(takeLaneId, newName));
              setRenaming(false);
            }}
          >
            Rename
          </Button>
        </Modal>
      )}
      <Outline style={focused ? { borderColor: trackColor } : {}}>
        <Grid>
          <HeaderRow>
            <TrackHeaderButton
              variant={
                isSoloed ? ButtonVariant.Primary : ButtonVariant.Tertiary
              }
              className={
                isSoloed
                  ? '!bg-foreground-primary !text-background-primary'
                  : ''
              }
              icon={isSoloed ? <VolumeOnIcon /> : <Volume0Icon />}
              onClick={toggleSolo}
            />
            <div className='relative h-full flex-1'>
              <TrackNameContainer>
                <Tooltip
                  label='Double-click to rename'
                  openDelay={500}
                  placement='top'
                >
                  <span
                    className='flex items-center justify-start gap-1'
                    onDoubleClick={(e) => {
                      e.stopPropagation();
                      setRenaming(true);
                    }}
                  >
                    {!heard && <NotificationDot className='h-2 w-2 min-w-2' />}
                    {trackName || (
                      <span className='text-gray-500'>[Unnamed]</span>
                    )}
                  </span>
                </Tooltip>
              </TrackNameContainer>
            </div>
          </HeaderRow>
        </Grid>
      </Outline>
    </Wrapper>
  );
}