import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Checklist, CloseRounded, Inventory, PersonAddOutlined } from '@mui/icons-material';

import { ACCOUNT } from '@/modules/@common/user/constants/rolesType';

import { isSelectedAllSelector, videoIdsSelector } from '../../redux/selectors';
import { closeAction, setAction } from '../../redux/slices';
import { getUserRoleTypeSelector } from '@/modules/@common/user/redux/selectors';
import { totalCountSelector, videosSelector } from '@/modules/editorial/editorialSearchResults/redux/selectors';

import BulkActionAddTagDialog from '@/modules/editorial/bulkActions/components/BulkActionAddTags/BulkActionAddTags';
import useGetSelectedVideo from '@/modules/editorial/bulkActions/hooks/useGetSelectedVideo';
import BulkActionArchiveDialog from '../BulkActionArchive/BulkActionArchive';
import BulkActionReplaceHubsDialog from '../BulkActionReplaceHubs/BulkActionReplaceHubs';
import BulkActionReplaceTagsDialog from '../BulkActionReplaceTags/BulkActionReplaceTags';
import BulkActionShareDialog from '../BulkActionShare/components/BulkActionShare';
import { Button, Divider, IconButton, Paper, Stack, Tooltip, Typography } from '@/mui/components';
import { CustomAddTag, CustomPersonUpdate, CustomReplaceTag } from '@/mui/components/CustomIcon';

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

function BulkActionsPanel() {
  const dispatch = useDispatch();
  const [showArchiveDialogAction, setShowArchiveDialogAction] = useState(false);
  const [showAddTagDialogAction, setShowAddTagDialogAction] = useState(false);
  const [showReplaceTagsDialogAction, setShowReplaceTagsDialogAction] = useState(false);
  const [showReplaceHubsDialogAction, setShowReplaceHubsDialogAction] = useState(false);
  const [showShareDialogAction, setShowShareDialogAction] = useState(false);

  const selectedAllVideos = useSelector(isSelectedAllSelector);
  const videoIds = useSelector(videoIdsSelector);
  const videosTotalCount = useSelector(totalCountSelector);
  const videosInList = useSelector(videosSelector);
  const userRoleType = useSelector(getUserRoleTypeSelector);

  const calculateTotalCount = useGetSelectedVideo();

  const shouldDisable = !videoIds.length;

  const handleClose = () => dispatch(closeAction());
  const handleSelectAll = () => dispatch(setAction({ isSelectedAll: true }));
  const handleClearSelected = () => dispatch(setAction({ videoIds: [], excludeVideoList: [], isSelectedAll: false }));

  // action archive
  const handleShowArchiveActionDialog = () => setShowArchiveDialogAction(true);
  const handleCloseArchiveActionDialog = () => setShowArchiveDialogAction(false);

  // action add tag
  const handleShowAddTagDialogAction = () => setShowAddTagDialogAction(true);
  const handleCloeAddTagDialogAction = () => setShowAddTagDialogAction(false);

  // replace tags
  const handleShowReplaceTagsDialogAction = () => setShowReplaceTagsDialogAction(true);
  const handleCloseReplaceTagsDialogAction = () => setShowReplaceTagsDialogAction(false);

  // replace hubs
  const handleShowReplaceHubsDialogAction = () => setShowReplaceHubsDialogAction(true);
  const handleCloseReplaceHubsDialogAction = () => setShowReplaceHubsDialogAction(false);

  // share action
  const handleShowShareActionDialog = () => setShowShareDialogAction(true);
  const handleCloseShareActionDialog = () => setShowShareDialogAction(false);

  useEffect(() => {
    if (selectedAllVideos) {
      const ids = videosInList.map((video) => video.uid);
      dispatch(setAction({ videoIds: ids }));
    }
  }, [videosInList, selectedAllVideos]);

  return (
    <Paper className={styles.Root}>
      <Stack className={styles.Wrapper} direction="row" justifyContent="space-between" alignItems="center">
        <Stack direction="row" spacing={2} alignItems="center">
          <Typography variant="caption" color="text.secondary" fontWeight={400}>
            {`${calculateTotalCount} Selected`}
          </Typography>
          <Divider className={styles.Divider} orientation="vertical" flexItem />
          <Button
            variant="outlined"
            size="xSmall"
            color="primary"
            shape="rounded"
            startIcon={<Checklist />}
            disabled={selectedAllVideos}
            onClick={handleSelectAll}
          >
            {`Select all ${videosTotalCount} Videos`}
          </Button>
          <Button
            variant="outlined"
            size="xSmall"
            color="neutral"
            shape="rounded"
            disabled={shouldDisable}
            onClick={handleClearSelected}
          >
            Clear Selection
          </Button>
        </Stack>
        <Stack direction="row" alignItems="center" spacing={2}>
          <Tooltip title="Add Tags">
            <IconButton size="medium" color="neutral" disabled={shouldDisable} onClick={handleShowAddTagDialogAction}>
              <CustomAddTag />
            </IconButton>
          </Tooltip>
          <Tooltip title="Replace & Delete Tags">
            <IconButton
              size="medium"
              color="neutral"
              disabled={shouldDisable}
              onClick={handleShowReplaceTagsDialogAction}
            >
              <CustomReplaceTag />
            </IconButton>
          </Tooltip>
          {userRoleType === ACCOUNT && (
            <Tooltip title="Share Videos">
              <IconButton size="medium" color="neutral" disabled={shouldDisable} onClick={handleShowShareActionDialog}>
                <PersonAddOutlined />
              </IconButton>
            </Tooltip>
          )}
          {userRoleType === ACCOUNT && (
            <Tooltip title="Replace & Delete Hubs">
              <IconButton
                size="medium"
                color="neutral"
                disabled={shouldDisable}
                onClick={handleShowReplaceHubsDialogAction}
              >
                <CustomPersonUpdate />
              </IconButton>
            </Tooltip>
          )}
          <Tooltip title="Archive Videos">
            <IconButton size="medium" color="neutral" disabled={shouldDisable} onClick={handleShowArchiveActionDialog}>
              <Inventory />
            </IconButton>
          </Tooltip>
          <Divider className={styles.Divider} orientation="vertical" flexItem />
          <Tooltip title="Close">
            <IconButton size="medium" color="neutral" onClick={handleClose}>
              <CloseRounded />
            </IconButton>
          </Tooltip>
        </Stack>
      </Stack>

      {showArchiveDialogAction && (
        <BulkActionArchiveDialog open={showArchiveDialogAction} onClose={handleCloseArchiveActionDialog} />
      )}

      {showAddTagDialogAction && (
        <BulkActionAddTagDialog open={showAddTagDialogAction} onClose={handleCloeAddTagDialogAction} />
      )}

      {showReplaceTagsDialogAction && (
        <BulkActionReplaceTagsDialog open={showReplaceTagsDialogAction} onClose={handleCloseReplaceTagsDialogAction} />
      )}

      {showReplaceHubsDialogAction && (
        <BulkActionReplaceHubsDialog open={showReplaceHubsDialogAction} onClose={handleCloseReplaceHubsDialogAction} />
      )}
      {showShareDialogAction && (
        <BulkActionShareDialog open={showShareDialogAction} onClose={handleCloseShareActionDialog} />
      )}
    </Paper>
  );
}

export default BulkActionsPanel;
