import React, { useCallback } from 'react';
import { useTransition } from 'react-spring';

export const ClearFilter = (filter: boolean, dispatch: any) =>
    useCallback(() => {
        filter && dispatch({ filterInput: '' });
    }, [filter, dispatch]);

export const SelectedItemTransition = (items: any[]) => {
    return useTransition(items, i => i, {
        from: { transform: 'scale(0)', opacity: 0 },
        enter: { transform: 'scale(1)', opacity: 1 },
        leave: { transform: 'scale(0)', opacity: 0 },
        unique: true,
        config: {
            tension: 300,
            clamp: true,
        },
    });
};

export const CollapseTransition = (trigger: string, height: any) => {
    return useTransition(trigger, null, {
        from: { height: 0 },
        enter: {
            display: 'flex',
            height,
        },
        leave: { height: 0, overflow: 'hidden' },
        unique: false,
        config: {
            tension: 300,
            clamp: true,
        },
    });
};