/** @jsx jsx */
import { jsx } from '@emotion/core';
import styled from '@emotion/styled';
import Waveform from './Waveform/Waveform';
import { expandedTrackHeight, collapsedTrackHeight, meterWidth, trackMargin } from '../styles/dimensions';
import { ReactComponent as XIcon } from '../icons/X.svg';
import { ReactComponent as WedgeUpIcon } from '../icons/WedgeUp.svg';
import { ReactComponent as WedgeDownIcon } from '../icons/WedgeDown.svg';
import { memo, useCallback, useMemo } from 'react';
import Meter from './Meter';
import { blue500 } from '../styles/colors_v2';
import HeaderTab, { HeaderTabButton } from './HeaderTab';
import HeaderTabTitle from './HeaderTabTitle';

const Wrapper = styled.li<{ height: number }>`
  height: ${({ height }) => height}px;
  display: grid;
  grid-template-columns: 1fr ${meterWidth}px;
  column-gap: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.11);
  margin-bottom: ${trackMargin}px;
`;

const TrackHeader = styled.div`
  position: absolute;
  z-index: 2;
`;

export default memo(({
  index,
  audioBuffers,
  analyser,
  title,
  height,
  resize,
  rename,
  deleteTrack,
  selectionStart,
  selectionEnd,
}: {
  index: number;
  audioBuffers: AudioBuffer[];
  analyser: AnalyserNode;
  title: string;
  height: number;
  resize: (index: number, newHeight: number) => void;
  rename: (index: number, newName: string) => void;
  deleteTrack: (index: number) => void;
  selectionStart: number | null;
  selectionEnd: number | null;
}) => {
  const submitTitle = useCallback(
    (value: string) => {
      rename(index, value);
    },
    [rename, index]
  );
  const toggleHeight = useCallback(
    () => {
      if (height === expandedTrackHeight) {
        resize(index, collapsedTrackHeight)
      } else {
        resize(index, expandedTrackHeight)
      }
    },
    [height, resize, index]
  );
  const onDelete = useCallback(
    () => {
      deleteTrack(index)
    },
    [index, deleteTrack]
  );
  const collapsed = useMemo(() => height <= collapsedTrackHeight, [height]);
  return (
    <Wrapper height={height}>
      <Waveform
        height={height}
        audioBuffers={audioBuffers}
        fillColor={blue500}
        strokeColor="transparent"
        selectionStart={selectionStart}
        selectionEnd={selectionEnd}
      />
      <Meter
        analyser={analyser}
        height={height}
      />
      <TrackHeader>
        <HeaderTab active>
          <HeaderTabButton onClick={onDelete}><XIcon /></HeaderTabButton>
          <HeaderTabButton onClick={toggleHeight}>{collapsed ? <WedgeDownIcon /> : <WedgeUpIcon />}</HeaderTabButton>
          <HeaderTabTitle value={title} onChange={submitTitle} />
        </HeaderTab>
      </TrackHeader>
    </Wrapper>
  );
});