import React, {useEffect, useState, useRef, useContext, Context} from 'react';
import {SinglePlaylistType, PlaylistContextInterface} from '../../../../contexts/PlaylistContext/PlaylistContext';
import {
  SinglePlaylistItemBoxInner,
  SinglePlaylistItemBox,
  SinglePlaylistCounter,
  SinglePlaylistName,
  SinglePlaylistSkipButtonBox,
  SinglePlaylistTimes,
} from './SinglePlaylistItem.css';
import ProgressBar from '../ProgressBar/ProgressBar';
import {displayTimeFromNumber as displayTime} from '../../../../utils';

interface PlaylistItemProps {
  context: Context<PlaylistContextInterface>,
  playlistItem: SinglePlaylistType;
  index: number;
  activeItem: number;
  handleChangePlayFunction: (id: string) => void;
  handleStartPlaylistItem: (index: number) => void;
}

interface TimesType { currentTime: number; sumTime: number }

const SinglePlaylistItem = (props: PlaylistItemProps) => {
  const {playlistItem, index, activeItem, handleChangePlayFunction, handleStartPlaylistItem, context} = props;
  const {playlist, setPlaylist} = useContext(context);
  const [times, setTimes] = useState<TimesType>({currentTime: 0, sumTime: 0});
  
  let inter: NodeJS.Timer;
  const interRef = useRef<NodeJS.Timer>(inter);

  const setInterRef = (_inter: NodeJS.Timer) => {
    interRef.current = _inter;
    inter = _inter;
  }

  const timesRef = useRef(times);
  const setTimesRef = (_times: TimesType) => {
    timesRef.current = _times;
    setTimes(_times);
  }

  useEffect(() => {
    if (activeItem === index) {
      setTimesRef({...timesRef.current, currentTime: 0});
      const my_inter = setInterval(
        () => {
          setTimesRef({currentTime: timesRef.current.currentTime + 1, sumTime: timesRef.current.sumTime + 1});
        }, 1000
      );
      setInterRef(my_inter);
    } else {
      if (interRef.current) {
        clearInterval(interRef.current);
        interRef.current = undefined;
        const newPlaylist = [...playlist];
        newPlaylist[index].sumTime += timesRef.current.currentTime;
        setPlaylist(newPlaylist);
      }
    }
    return () => clearInterval(inter);
  }, [activeItem, inter]);

  return (
    <SinglePlaylistItemBox error={playlistItem.error} key={playlistItem.id} index={index} activeItem={activeItem} onDoubleClick={() => handleStartPlaylistItem(index)}>
      <SinglePlaylistItemBoxInner>
        <SinglePlaylistCounter>{index + 1}.</SinglePlaylistCounter>
        <SinglePlaylistName>{playlistItem.name}</SinglePlaylistName>
        <SinglePlaylistSkipButtonBox>
          <input type="checkbox" checked={playlistItem.play} onChange={() => handleChangePlayFunction(playlistItem.id)} />
        </SinglePlaylistSkipButtonBox>
        <div style={{flex: '0 1 100px'}}>
          {displayTime(playlistItem.sumTime)}
        </div>
        <SinglePlaylistTimes>{index === activeItem ? timesRef.current.currentTime : playlistItem.currentTime}/{playlistItem.duration}</SinglePlaylistTimes>
      </SinglePlaylistItemBoxInner>
      <div>
        {
          activeItem === index 
            && 
              <ProgressBar progress={(timesRef.current.currentTime/playlistItem.duration)*100} />
        }
      </div>
    </SinglePlaylistItemBox>
  );
};

export default React.memo(SinglePlaylistItem);