import { deepMerge } from '../utils';
export const createBaseTransition = (type, duration = 250, cubicBezier = '0.76, 0.24, 0.23, 0.94') => type.map(v => `${v} ${duration}ms cubic-bezier(${cubicBezier}) 0ms`).join(',');
const baseTransition = createBaseTransition(['all']);

function createTransition(transitions) {
  const defaultTransitions = {
    default: baseTransition,
    button: createBaseTransition(['background-color', 'color', 'border-color', 'box-shadow', 'padding'], 250),
    input: createBaseTransition(['background-color', 'color', 'border-color'], 250),
    checkbox: baseTransition,
    toggle: baseTransition,
    radio: baseTransition,
    navigation: baseTransition,
    drawer: createBaseTransition(['box-shadow'], 250),
    card: createBaseTransition(['box-shadow', 'transform'])
  };
  return deepMerge(transitions, defaultTransitions);
}

export default createTransition;