import { setAction, setObjectValuesAction } from '@/modules/players/Editor/redux/slices';

export const setStateHandler = (fieldName, value, dispatch, additionalData = {}) => {
  let objectToUpdate = {};
  const {
    objectName = '',
    playerAspectRatioOptions = [],
    playerDynamicAspectRatioOptions = [],
    carouselOrientationOptions = [],
  } = additionalData;

  if (fieldName === 'playerWidthUnit') {
    objectToUpdate = {
      ...objectToUpdate,
      playerWidth: additionalData.playerWidthUnitOptions.find((option) => option.value === value)?.defaultWidth,
    };
  }
  if (fieldName === 'playerWidthMobileUnit') {
    objectToUpdate = {
      ...objectToUpdate,
      playerWidthMobile: additionalData.playerWidthUnitOptions.find((option) => option.value === value)?.defaultWidth,
    };
  }
  if (fieldName === 'playerAspectRatio') {
    const withoutCarousel =
      !playerAspectRatioOptions.find((option) => option.value === value && option.withCarousel) ||
      !playerDynamicAspectRatioOptions.find((option) => option.value === value && option.withCarousel);
    const isDefaultAspectRatio = !!playerAspectRatioOptions.find(
      (option) => option.value === value && option.isDefault,
    );

    if (withoutCarousel) {
      objectToUpdate = {
        ...objectToUpdate,
        carouselEnabled: 0,
        carouselEnabledMobile: 0,
      };
    }
    if (isDefaultAspectRatio) {
      const defaultCarouselOrientation = carouselOrientationOptions.find((option) => option.isDefault);
      objectToUpdate = {
        ...objectToUpdate,
        carouselEnabled: 1,
        carouselOrientation: defaultCarouselOrientation?.value,
      };
    }
  }

  if (objectName) {
    dispatch(setObjectValuesAction({ [objectName]: { [fieldName]: value } }));
  } else {
    dispatch(
      setAction({
        ...objectToUpdate,
        [fieldName]: value,
      }),
    );
  }
};

export const getCreateControlsOptions = ({
  videoResolutionControl,
  playbackSpeedControl,
  fullScreen,
  chapteringMenuNavigation,
  theaterMode,
  ffRewind,
}) =>
  [
    {
      label: 'Resolution Control',
      value: videoResolutionControl,
      valueName: 'videoResolutionControl',
    },
    {
      label: 'Playback Speed',
      value: playbackSpeedControl,
      valueName: 'playbackSpeedControl',
    },
    {
      label: 'Full Screen',
      value: fullScreen,
      valueName: 'fullScreen',
    },
    {
      label: 'Chaptering',
      value: chapteringMenuNavigation,
      valueName: 'chapteringMenuNavigation',
      dependentValueName: 'chapteringTimeline',
    },
    {
      label: 'Theater Mode',
      value: theaterMode,
      valueName: 'theaterMode',
    },
    {
      label: '10 Seconds Rewind',
      value: ffRewind,
      valueName: 'ffRewind',
    },
  ].filter((option) => option.value !== null && option.value !== undefined);

export const multiSelectHandler = (selectedArr, options, dispatch) => {
  const newValues = selectedArr.reduce((acc, { valueName, dependentValueName }) => {
    if (dependentValueName) {
      acc[dependentValueName] = 1;
    }
    acc[valueName] = 1;
    return acc;
  }, {});

  const valuesToDisable = options?.filter(({ valueName }) => !newValues[valueName]);
  valuesToDisable.forEach(({ valueName, dependentValueName }) => {
    if (dependentValueName) {
      newValues[dependentValueName] = 0;
    }
    newValues[valueName] = 0;
  });
  dispatch(setAction(newValues));
};

export const getCreateSocialFeaturesOptions = ({ socialViewButton, socialLikeButton }) => [
  {
    label: 'Views',
    value: socialViewButton,
    valueName: 'socialViewButton',
  },
  {
    label: 'Likes',
    value: socialLikeButton,
    valueName: 'socialLikeButton',
  },
];
