import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { Monitor, PhoneIphone } from '@mui/icons-material';

import {
  AD_SERVER_ENABLED_VALUES,
  FLOATING_AMP_STICKY_BAR_MODE,
  FLOATING_MODE_ONLY_FOR_CONFIG,
  FLOATING_TAB,
} from '@/modules/players/Editor/constants';

import * as playerSelectors from '../../redux/selectors';
import {
  getEditorialPlaylistClipInformation,
  getPlayerWidgetName,
  getPlayerWidth,
  getPublisherName,
} from '@/modules/players/Editor/helpers/playerPreview';

import PlayerIframeView from '@/modules/players/PlayerIframeView/PlayerIframeView';
import { Stack, ToggleButton, ToggleButtonGroup } from '@/mui/components';

import styles from './PlayerPreviewWrapper.module.scss';

function PlayerPreviewWrapper() {
  const id = useSelector(playerSelectors.idSelector);
  const name = useSelector(playerSelectors.nameSelector);
  const playerLreLogo = useSelector(playerSelectors.playerLreLogoSelector);
  const publisher = useSelector(playerSelectors.publisherSelector);
  const playlistLimit = useSelector(playerSelectors.playlistLimitSelector);
  const playInLoop = useSelector(playerSelectors.playInLoopSelector);
  const startWithSound = useSelector(playerSelectors.startWithSoundSelector);
  const publisherDomainId = useSelector(playerSelectors.publisherDomainIdSelector);
  const allFeeds = useSelector(playerSelectors.allFeedsSelector);
  const playerEditorialPlaylist = useSelector(playerSelectors.playerEditorialPlaylistSelector);
  const autoplayDesktop = useSelector(playerSelectors.autoplayDesktopSelector);
  const autoplayMobile = useSelector(playerSelectors.autoplayMobileSelector);
  const displayMonetizationDesktop = useSelector(playerSelectors.displayMonetizationDesktopSelector);
  const displayMonetizationMobile = useSelector(playerSelectors.displayMonetizationMobileSelector);
  const displayClipNotInViewPlayAdsDesktop = useSelector(playerSelectors.displayClipNotInViewPlayAdsDesktopSelector);
  const displayClipNotInViewPlayAdsMobile = useSelector(playerSelectors.displayClipNotInViewPlayAdsMobileSelector);
  const adIndicator = useSelector(playerSelectors.adIndicatorSelector);
  const adIndicatorText = useSelector(playerSelectors.adIndicatorTextSelector);
  const loopPlaylist = useSelector(playerSelectors.loopPlaylistSelector);
  const adsOnLoopOff = useSelector(playerSelectors.adsOnLoopOffSelector);
  const clipNotInViewPlayAdsDesktop = useSelector(playerSelectors.clipNotInViewPlayAdsDesktopSelector);
  const inviewAdInterval = useSelector(playerSelectors.inviewAdIntervalSelector);
  const notInviewAdInterval = useSelector(playerSelectors.notInviewAdIntervalSelector);
  const maxAdsPerClipChecked = useSelector(playerSelectors.maxAdsPerClipCheckedSelector);
  const maxAdsPerClip = useSelector(playerSelectors.maxAdsPerClipSelector);
  const firstAdRequestDelay = useSelector(playerSelectors.firstAdRequestDelaySelector);
  const clipNotInViewPlayAdsMobile = useSelector(playerSelectors.clipNotInViewPlayAdsMobileSelector);
  const leftBrandingColor = useSelector(playerSelectors.leftBrandingColorSelector);
  const leftBrandingSize = useSelector(playerSelectors.leftBrandingSizeSelector);
  const progressBarColor = useSelector(playerSelectors.progressBarColorSelector);
  const timestampTooltipColor = useSelector(playerSelectors.timestampTooltipColorSelector);
  const volumeBarColor = useSelector(playerSelectors.volumeBarColorSelector);
  const settingsMenuHighlightColor = useSelector(playerSelectors.settingsMenuHighlightColorSelector);

  const floatingDesktopMode = useSelector(playerSelectors.floatingDesktopModeSelector);
  const floatingDesktopEnabled = useSelector(playerSelectors.floatingDesktopEnabledSelector);

  const floatingDesktopPosition = useSelector(playerSelectors.floatingDesktopPositionSelector);
  const floatingDesktopWidth = useSelector(playerSelectors.floatingDesktopWidthSelector);
  const floatingDesktopDelay = useSelector(playerSelectors.floatingDesktopDelaySelector);

  const floatingMobileEnabled = useSelector(playerSelectors.floatingMobileEnabledSelector);
  const floatingMobileMode = useSelector(playerSelectors.floatingMobileModeSelector);
  const floatingMobilePosition = useSelector(playerSelectors.floatingMobilePositionSelector);
  const floatingMobileWidth = useSelector(playerSelectors.floatingMobileWidthSelector);
  const floatingMobileDelay = useSelector(playerSelectors.floatingMobileDelaySelector);

  const adManagerDesktop = useSelector(playerSelectors.adManagerDesktopSelector);
  const adManagerMobile = useSelector(playerSelectors.adManagerMobileSelector);

  const flowTermId = useSelector(playerSelectors.flowTermIdSelector);
  const flowTermsOptions = useSelector(playerSelectors.flowTermsOptionsSelector);
  const shufflePlaylist = useSelector(playerSelectors.shufflePlaylistSelector);
  const playerType = useSelector(playerSelectors.playerTypeSelector);
  const playerWidthUnit = useSelector(playerSelectors.playerWidthUnitSelector);
  const playerWidth = useSelector(playerSelectors.playerWidthSelector);
  const playerWidthMobileUnit = useSelector(playerSelectors.playerWidthMobileUnitSelector);
  const playerWidthMobile = useSelector(playerSelectors.playerWidthMobileSelector);
  const playerAspectRatio = useSelector(playerSelectors.playerAspectRatioSelector);
  const brandingLeft = useSelector(playerSelectors.brandingLeftSelector);
  const brandingRight = useSelector(playerSelectors.brandingRightSelector);
  const carouselEnabled = useSelector(playerSelectors.carouselEnabledSelector);
  const carouselEnabledMobile = useSelector(playerSelectors.carouselEnabledMobileSelector);
  const carouselOrientation = useSelector(playerSelectors.carouselOrientationSelector);
  const socialViewButton = useSelector(playerSelectors.socialViewButtonSelector);
  const socialLikeButton = useSelector(playerSelectors.socialLikeButtonSelector);

  const xRayCampaignsEnabled = useSelector(playerSelectors.xRayCampaignsEnabledSelector);
  const titleAndTimeline = useSelector(playerSelectors.verticalFullscreenTitleTimelineVisibilitySelector);
  const swipeAnimation = useSelector(playerSelectors.swipeAnimationSelector);
  const swipeAnimationMaxVisits = useSelector(playerSelectors.swipeAnimationMaxVisitsSelector);
  const swipeAnimationDuration = useSelector(playerSelectors.swipeAnimationDurationSelector);
  const closedCaptioning = useSelector(playerSelectors.closedCaptioningSelector);
  const videoResolutionControl = useSelector(playerSelectors.videoResolutionControlSelector);
  const playbackSpeedControl = useSelector(playerSelectors.playbackSpeedControlSelector);
  const fullScreen = useSelector(playerSelectors.fullScreenSelector);
  const chapteringMenuNavigation = useSelector(playerSelectors.chapteringMenuNavigationSelector);
  const theaterMode = useSelector(playerSelectors.theaterModeSelector);
  const ffRewind = useSelector(playerSelectors.ffRewindSelector);
  const activeTabId = useSelector(playerSelectors.activeTabIdSelector);
  const verticalFullscreenTitleTimelineVisibility = useSelector(
    playerSelectors.verticalFullscreenTitleTimelineVisibilitySelector,
  );

  const [isMobileDevice, toggleDeviceState] = useState(0);
  const isDynamicAspectRatio = playerAspectRatio === 'dynamic';
  return (
    <Stack fullWidth spacing={4} alignItems="center" direction="column" className={styles.Wrapper}>
      <ToggleButtonGroup
        exclusive
        size="medium"
        shape="rounded"
        value={isMobileDevice}
        onChange={(_, newValue) => {
          if (newValue !== null) {
            toggleDeviceState(newValue);
          }
        }}
      >
        <ToggleButton value={0}>
          <Monitor />
        </ToggleButton>
        <ToggleButton value={1}>
          <PhoneIphone />
        </ToggleButton>
      </ToggleButtonGroup>

      <PlayerIframeView
        // IMPORTANT - do not forget add property to _preview.tsx also
        logo={playerLreLogo?.file}
        mobile={!!isMobileDevice}
        publisherName={getPublisherName(id, publisher, playerType)}
        widgetName={getPlayerWidgetName(publisher, playerType, name)}
        playerWidth={getPlayerWidth(playerWidth, playerWidthUnit)}
        playerWidthMobile={getPlayerWidth(playerWidthMobile, playerWidthMobileUnit)}
        playlistLimit={playlistLimit} // number
        loopPlaylist={!!playInLoop}
        startWithSound={!!startWithSound}
        publisherDomainId={publisherDomainId} // number
        selfServe
        allFeeds={!!allFeeds}
        fallbackPlaylist={getEditorialPlaylistClipInformation(playerEditorialPlaylist)}
        autoplayDesktop={!!autoplayDesktop}
        autoplayMobile={!!autoplayMobile}
        displayAdsEnabled={!!displayMonetizationDesktop}
        displayAdsPlayAdsNotInView={!!displayClipNotInViewPlayAdsDesktop}
        displayAdsForMobileEnabled={!!displayMonetizationMobile}
        displayAdsForMobilePlayAdsNotInView={!!displayClipNotInViewPlayAdsMobile}
        adIndicator={!!adIndicator}
        adIndicatorText={adIndicatorText}
        playAdsOnLoopEnd={!!adsOnLoopOff && !loopPlaylist}
        clipNotInViewPlayAdsDesktop={!!clipNotInViewPlayAdsDesktop}
        inviewAdInterval={inviewAdInterval}
        notInviewAdInterval={notInviewAdInterval}
        maxAdsPerClip={maxAdsPerClipChecked ? maxAdsPerClip : -1} // number
        firstAdRequestDelay={firstAdRequestDelay} // number
        clipNotInViewPlayAdsMobile={clipNotInViewPlayAdsMobile}
        aspectratio={isDynamicAspectRatio ? '16:9' : (playerAspectRatio?.replace('_', ':') ?? '16:9')}
        aspectratioMobile={isDynamicAspectRatio ? '9:16' : undefined}
        brandingEnabled={!!brandingLeft && !!brandingRight}
        brandingLeftText={brandingLeft}
        brandingRigthText={brandingRight}
        floatingDesktopEnabled={activeTabId === FLOATING_TAB && floatingDesktopEnabled}
        floatingDesktopMode={
          activeTabId === FLOATING_TAB ? FLOATING_MODE_ONLY_FOR_CONFIG : floatingDesktopMode?.toLowerCase()
        }
        floatingDesktopPosition={floatingDesktopPosition?.toLowerCase()}
        floatingDesktopWidth={floatingDesktopWidth} // number
        floatingDesktopDelay={floatingDesktopDelay} // number
        floatingMobileEnabled={activeTabId === FLOATING_TAB && floatingMobileEnabled}
        floatingMobileEnabledNumber={floatingMobileEnabled}
        floatingMobileMode={
          activeTabId === FLOATING_TAB ? FLOATING_MODE_ONLY_FOR_CONFIG : floatingMobileMode?.toLowerCase()
        }
        floatingMobilePosition={floatingMobilePosition?.toLowerCase()}
        floatingMobileWidth={floatingMobileWidth} // number
        floatingMobileDelay={floatingMobileDelay} // number
        ampStickyBarMode={floatingMobileEnabled === FLOATING_AMP_STICKY_BAR_MODE}
        carouselEnabled={!!carouselEnabled}
        carouselEnabledMobile={!!carouselEnabledMobile}
        carouselOrientation={carouselOrientation}
        xRayCampaignsEnabled={!!xRayCampaignsEnabled}
        adServerDesktopEnabled={AD_SERVER_ENABLED_VALUES.includes(adManagerDesktop)}
        adServerMobileEnabled={AD_SERVER_ENABLED_VALUES.includes(adManagerMobile)}
        playlistType={flowTermsOptions.find((flow) => flow.id === flowTermId)?.term}
        shuffleFallback={!!shufflePlaylist}
        titleAndTimeline={titleAndTimeline}
        closedCaptions={closedCaptioning}
        resolutionPane={!!videoResolutionControl}
        speedPane={!!playbackSpeedControl}
        fullScreenButton={!!fullScreen}
        chapteringMenuListEnabled={!!chapteringMenuNavigation}
        theaterModeButton={!!theaterMode}
        ffRewind={!!ffRewind}
        socialIconsEnabled={!!socialViewButton || !!socialLikeButton}
        socialViewButton={!!socialViewButton}
        socialLikeButton={!!socialLikeButton}
        leftBrandingColor={leftBrandingColor}
        leftBrandingSize={leftBrandingSize}
        progressBarColor={progressBarColor}
        timestampTooltipColor={timestampTooltipColor}
        volumeBarColor={volumeBarColor}
        settingsMenuHighlightColor={settingsMenuHighlightColor}
        verticalFullscreenTitleTimelineVisibility={verticalFullscreenTitleTimelineVisibility?.toLowerCase()}
        swipeAnimation={!!swipeAnimation}
        swipeAnimationMaxVisits={swipeAnimationMaxVisits}
        swipeAnimationDuration={swipeAnimationDuration}
      />
    </Stack>
  );
}

export default PlayerPreviewWrapper;
