import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';

const badgeMarginTopRight = [
  { name: 'Vertical', value: 'marginTop' },
  { name: 'Horizontal', value: 'marginRight' },
];

const badgeMarginRightBottom = [
  { name: 'Horizontal', value: 'marginRight' },
  { name: 'Vertical', value: 'marginBottom' },
];

const badgeMarginBottomLeft = [
  { name: 'Vertical', value: 'marginBottom' },
  { name: 'Horizontal', value: 'marginLeft' },
];

const badgeMarginTopLeft = [
  { name: 'Vertical', value: 'marginTop' },
  { name: 'Horizontal', value: 'marginLeft' },
];

const useGetApplicableMargin = () => {
  const [badgeMargin, setBadgeMargin] = useState([]);
  const { badge_settings } = useSelector((state) => state.badges);

  useEffect(() => {
    if (['top-left', 'center-left'].includes(badge_settings.position)) {
      setBadgeMargin(badgeMarginTopLeft);
    }

    if (['bottom-left', 'bottom-center'].includes(badge_settings.position)) {
      setBadgeMargin(badgeMarginBottomLeft);
    }

    if (['center', 'top-center'].includes(badge_settings.position)) {
      setBadgeMargin(badgeMarginTopLeft);
    }

    if (['center-right', 'top-right'].includes(badge_settings.position)) {
      setBadgeMargin(badgeMarginTopRight);
    }

    if (['bottom-right'].includes(badge_settings.position)) {
      setBadgeMargin(badgeMarginRightBottom);
    }
  }, [badge_settings.position]);

  return badgeMargin;
};
export default useGetApplicableMargin;