import { useCallback } from "@wordpress/element";

export function useHoverSync(attributes, setAttributes) {
  const copyDefaultToHover = useCallback(
    (attrList) => {
      const hoverAttributes = {};
      attrList.forEach((attr) => {
        if (attributes[attr] !== undefined) {
          hoverAttributes[attr + "Hover"] = attributes[attr];
        }
      });
      setAttributes(hoverAttributes);
    },
    [attributes, setAttributes]
  );

  const createSyncHandler = useCallback(
    (attrGroups, group) => () => {
      if (attrGroups[group]) {
        copyDefaultToHover(attrGroups[group]);
      }
    },
    [copyDefaultToHover]
  );

  return {
    copyDefaultToHover,
    createSyncHandler,
  };
}

export default useHoverSync;
