import React, { useCallback } from 'react';
import Modal from 'components/Modal';
import { useNavigation, StackActions, useRoute, RouteProp } from '@react-navigation/native';
import { ModalStackParams } from 'screens/types';
import { useTypedSelector } from 'store';
import { SubHeader } from 'components/Typography';
import styled from 'styled-components/native';
import { t } from '@localisation';
import PlayIcon from 'assets/play.svg';
import DownloadIcon from 'assets/cloud-down-arrow.svg';
import QueueAppendIcon from 'assets/queue-append.svg';
import Text from 'components/Text';
import { WrappableButton, WrappableButtonRow } from 'components/WrappableButtonRow';
import { useDispatch } from 'react-redux';
import { downloadTrack } from 'store/downloads/actions';
import usePlayTracks from 'utility/usePlayTracks';

type Route = RouteProp<ModalStackParams, 'TrackPopupMenu'>;

const Container = styled.View`
    padding: 20px;
    flex: 0 0 auto;
    flex-direction: column;
`;

function TrackPopupMenu() {
    // Retrieve helpers
    const { params: { trackId } } = useRoute<Route>();
    const navigation = useNavigation();
    const dispatch = useDispatch();
    const track = useTypedSelector((state) => state.music.tracks.entities[trackId]);
    const playTracks = usePlayTracks();

    // Set callback to close the modal
    const closeModal = useCallback(() => {
        navigation.dispatch(StackActions.popToTop());    
    }, [navigation]);

    const handlePlayNext = useCallback(() => {
        playTracks([trackId], { method: 'add-after-currently-playing', play: false });
        closeModal();
    }, [playTracks, closeModal, trackId]);
    const handleAddToQueue = useCallback(() => {
        playTracks([trackId], { method: 'add-to-end', play: false });
        closeModal();
    }, [playTracks, closeModal, trackId]);
    const handleDownload = useCallback(() => {
        dispatch(downloadTrack(trackId));
        closeModal();
    }, [trackId, dispatch]);

    return (
        <Modal fullSize={false}>
            <Container>
                <SubHeader style={{ textAlign: 'center' }}>{track?.Name}</SubHeader>
                <Text style={{ marginBottom: 18, textAlign: 'center' }}>{track?.Album} - {track?.AlbumArtist}</Text>
                <WrappableButtonRow>
                    <WrappableButton title={t('play-next')} icon={PlayIcon} onPress={handlePlayNext} />
                    <WrappableButton title={t('add-to-queue')} icon={QueueAppendIcon} onPress={handleAddToQueue} />
                    <WrappableButton title={t('download-track')} icon={DownloadIcon} onPress={handleDownload} />
                </WrappableButtonRow>
            </Container>
        </Modal>
    );
}

export default TrackPopupMenu;