import styled from '@emotion/styled';
import { useCallback } from 'react';

import { useContextSelector } from '@/hooks/useContextSelector';
import { PlusIcon } from '@/icons';

import Button, { ButtonVariant } from '../button/Button';
import StudioContext from './StudioContext';
import addTrack from './actions/addTrack';

const Wrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--background-secondary);
  border-left: 3px solid transparent;
  padding: 8px;
`;

export default function GhostTrackHeader() {
  const setState = useContextSelector(StudioContext, (ctx) => ctx.setState);
  const isReadOnlyMode = useContextSelector(
    StudioContext,
    (ctx) => ctx.isReadOnlyMode
  );

  const handleAddTrack = useCallback(() => {
    if (!isReadOnlyMode) {
      setState(addTrack);
    }
  }, [setState, isReadOnlyMode]);

  return (
    <Wrapper>
      <Button
        variant={ButtonVariant.Secondary}
        icon={PlusIcon}
        onClick={handleAddTrack}
        disabled={isReadOnlyMode}
      >
        Add Track
      </Button>
    </Wrapper>
  );
}