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

import * as playerSelectors from '../../../redux/selectors';
import { setAction } from '../../../redux/slices';

import { FormGroupTitle, FormRow, FormSection, useFormSettings } from '@/modules/@common/Form';
import IntervalsList from '../../IntervalsList/IntervalsList';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Switch, Typography } from '@/mui/components';

function DisplayAdsTab() {
  const { size } = useFormSettings();
  const dispatch = useDispatch();

  const displayMonetizationDesktop = useSelector(playerSelectors.displayMonetizationDesktopSelector);
  const displayMonetizationMobile = useSelector(playerSelectors.displayMonetizationMobileSelector);

  const displayClipNotInViewPlayAdsDesktop = useSelector(playerSelectors.displayClipNotInViewPlayAdsDesktopSelector);
  const displayClipNotInViewPlayAdsMobile = useSelector(playerSelectors.displayClipNotInViewPlayAdsMobileSelector);

  const displayInviewAdInterval = useSelector(playerSelectors.displayInviewAdIntervalSelector);
  const displayNotInviewAdInterval = useSelector(playerSelectors.displayNotInviewAdIntervalSelector);
  const displayInviewAdIntervalMobile = useSelector(playerSelectors.displayInviewAdIntervalMobileSelector);
  const displayNotInviewAdIntervalMobile = useSelector(playerSelectors.displayNotInviewAdIntervalMobileSelector);

  const handleSetState = (state) => dispatch(setAction(state));
  const [confirmationDialog, setConfirmationDialog] = useState(null);

  const handleConfirm = () => {
    handleSetState({
      displayClipNotInViewPlayAdsDesktop: 0,
      displayClipNotInViewPlayAdsMobile: 0,
    });
    setConfirmationDialog(null);
  };

  const handleCancel = () => {
    setConfirmationDialog(null);
  };

  return (
    <>
      <FormSection>
        <FormRow label="Desktop Monetization">
          <Switch
            color="primary"
            size={size}
            checked={!!displayMonetizationDesktop}
            onChange={({ target }) =>
              handleSetState({
                displayMonetizationDesktop: target.checked ? 1 : 0,
              })
            }
          />
        </FormRow>
        <FormRow label="Mobile Monetization">
          <Switch
            color="primary"
            size={size}
            checked={!!displayMonetizationMobile}
            onChange={({ target }) =>
              handleSetState({
                displayMonetizationMobile: target.checked ? 1 : 0,
              })
            }
          />
        </FormRow>
        <FormRow label="Play Ads when Player is Not-Inview">
          <Switch
            color="primary"
            size={size}
            checked={!!displayClipNotInViewPlayAdsDesktop && displayClipNotInViewPlayAdsMobile}
            onChange={({ target }) => {
              if (!target.checked) {
                if (displayClipNotInViewPlayAdsDesktop && displayClipNotInViewPlayAdsMobile) {
                  setConfirmationDialog({
                    title: 'Disable non-viewable Display Ads',
                    primary:
                      'Disabling non-viewable video ads will significantly reduce the revenue generated by this player by limiting ad delivery when the player is not in view.',
                    secondary: 'Please consult your dedicated Account Manager before proceeding.',
                    important: true,
                  });
                }
              } else {
                handleSetState({
                  displayClipNotInViewPlayAdsDesktop: target.checked ? 1 : 0,
                  displayClipNotInViewPlayAdsMobile: target.checked ? 1 : 0,
                });
              }
            }}
          />
        </FormRow>
        <FormGroupTitle>Display Refresh Intervals</FormGroupTitle>
        <FormRow fullWidth>
          <IntervalsList
            intervalsHeaderName="Refresh Intervals (ms)"
            desktopInViewInterval={displayInviewAdInterval}
            desktopNotInViewInterval={displayNotInviewAdInterval}
            mobileInViewInterval={displayInviewAdIntervalMobile}
            mobileNotInViewInterval={displayNotInviewAdIntervalMobile}
            desktopInViewStateName="displayInviewAdInterval"
            desktopNotInViewStateName="displayNotInviewAdInterval"
            mobileInViewStateName="displayInviewAdIntervalMobile"
            mobileNotInViewStateName="displayNotInviewAdIntervalMobile"
          />
        </FormRow>
      </FormSection>
      {confirmationDialog && (
        <Dialog open={!!confirmationDialog} onClose={handleCancel} maxWidth="md">
          <DialogTitle onClose={() => setConfirmationDialog(null)}>{confirmationDialog.title}</DialogTitle>
          <DialogContent>
            <Stack gap={1} fullWidth>
              <Typography component="div" variant="body2">
                {confirmationDialog.primary}
              </Typography>
              <Typography
                component="div"
                variant="body2"
                color={confirmationDialog.important ? 'error.main' : 'text.primary'}
                fontWeight={confirmationDialog.important ? 600 : 400}
              >
                {confirmationDialog.secondary}
              </Typography>
            </Stack>
          </DialogContent>
          <DialogActions>
            <Button variant="outlined" color="primary" onClick={handleCancel}>
              Cancel
            </Button>
            <Button variant="contained" color="primary" onClick={handleConfirm}>
              Confirm
            </Button>
          </DialogActions>
        </Dialog>
      )}
    </>
  );
}

export default DisplayAdsTab;
