import clsx from 'clsx';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowDown, faArrowLeft, faArrowRight, faArrowUp } from '@fortawesome/free-solid-svg-icons'

import { Bin } from '../../../../lib/bin.enum';
import { BinButton } from '../BinButton/BinButton';

import { useCallback, useContext, useEffect } from 'react';
import { BinnerContext } from '../../context/BinnerContext';

import styles from './Bins.module.scss';

export function Bins() {
    const { bin, item, setBin, setItem } = useContext(BinnerContext);

    const handleKeydown = useCallback((event: KeyboardEvent) => {
        switch (event.key) {
            case 'ArrowDown':
                event.preventDefault();
                !!item && setBin(Bin.LOSS);
                break;
            case 'ArrowLeft':
                event.preventDefault();
                !!item && setBin(Bin.PROCESS);
                break;
            case 'ArrowRight':
                event.preventDefault();
                !!item && setBin(Bin.SHOULDER_TAP);
                break;
            case 'ArrowUp':
                event.preventDefault();
                !!item && setBin(Bin.DONATE);
                break;
        }
    }, [item, setBin]);

    useEffect(() => {
        window.addEventListener('keydown', handleKeydown);
        return () => {
            window.removeEventListener('keydown', handleKeydown);
        };
    }, [handleKeydown]);
    
    return (
        <div className={styles.bins}>
            <div className={styles.pdsBinWrap}>
                <BinButton className={clsx(styles.bin, styles.pBin, styles.iconLeft)} bin={Bin.PROCESS} icon={<FontAwesomeIcon icon={faArrowLeft} />} />
                <BinButton className={clsx(styles.bin, styles.dBin, styles.iconTop)} bin={Bin.DONATE} icon={<FontAwesomeIcon icon={faArrowUp} />} />
                <BinButton className={clsx(styles.bin, styles.sBin, styles.iconRight)} bin={Bin.SHOULDER_TAP} icon={<FontAwesomeIcon icon={faArrowRight} />} />
            </div>
            <BinButton className={clsx(styles.lossBinWrap, styles.lBin, styles.iconBottom)} bin={Bin.LOSS} icon={<FontAwesomeIcon icon={faArrowDown} />} />
        </div>
    );
}
