import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { GroupsRounded, PlayCircleRounded, ShareRounded } from '@mui/icons-material';

import { VIDEO_TABS_ENUM } from '@/modules/editorial/editorialSearchFilter/constants';

import { getUserPermissionsSelector } from '@/modules/@common/user/redux/selectors';
import { getVideoTabs } from '@/modules/editorial/helpers/videoTab';
import { isMobileApp } from '@/modules/layout/helpers';

import BulkActionsActivateButton from '@/modules/editorial/bulkActions/components/BulkActionsActivateButton/BulkActionsActivateButton';
import { Paper, Stack, Tab, Tabs } from '@/mui/components';

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

const getVideoTabProps = (tabCounters) => ({
  [VIDEO_TABS_ENUM.all]: {
    dataId: 'all-videos',
    icon: GroupsRounded,
    text: `All${!isMobileApp ? ' Videos' : ''} (${tabCounters.all})`,
  },
  [VIDEO_TABS_ENUM.own]: {
    dataId: 'my-videos',
    icon: PlayCircleRounded,
    text: `My${!isMobileApp ? ' Videos' : ''} (${tabCounters.own})`,
  },
  [VIDEO_TABS_ENUM.shared]: {
    dataId: 'shared-videos',
    icon: ShareRounded,
    text: `Shared${!isMobileApp ? ' With Me' : ''} (${tabCounters.shared})`,
  },
});

function VideoTabs(props) {
  const userPermissions = useSelector(getUserPermissionsSelector);
  const [activeTab, setActiveTab] = useState(0);
  const videoTabs = getVideoTabs(userPermissions);
  const videoTabsProps = getVideoTabProps(props.tabCounters);
  const shouldHideTabs = Object.values(props.tabCounters).every((tab) => tab === null);

  useEffect(() => {
    const tabIndex = videoTabs.findIndex((tab) => props.currentFilterConfig.videoTabs.filters[0].value === tab.value);

    setActiveTab(tabIndex);
  }, [props.currentFilterConfig.videoTabs]);

  const handleSetTab = (tabIndex) => {
    const tab = videoTabs[tabIndex];
    const updateFilterConfig = {
      ...props.currentFilterConfig,
      videoTabs: {
        filters: [tab],
      },
    };

    setActiveTab(tabIndex);
    props.setFilter(updateFilterConfig);
    props.applyFilter();
  };

  return (
    <Paper className={styles.Wrapper}>
      {!shouldHideTabs && (
        <Stack className={styles.TabWrapper} flexDirection="row" justifyContent="space-between" alignItems="center">
          <Stack>
            <Tabs value={activeTab} onChange={(event, tabIndex) => handleSetTab(tabIndex)}>
              {videoTabs.map((tab) => {
                const currentTabProps = videoTabsProps[tab.value];
                const Icon = currentTabProps.icon;

                return (
                  <Tab
                    key={currentTabProps.text}
                    data-id={currentTabProps.dataId}
                    icon={<Icon />}
                    label={currentTabProps.text}
                  />
                );
              })}
            </Tabs>
          </Stack>
          <Stack>
            <BulkActionsActivateButton />
          </Stack>
        </Stack>
      )}
    </Paper>
  );
}

VideoTabs.propTypes = {
  currentFilterConfig: PropTypes.shape({
    videoTabs: PropTypes.shape({
      filters: PropTypes.arrayOf(
        PropTypes.shape({
          value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        }),
      ),
    }),
  }).isRequired,
  tabCounters: PropTypes.shape({}).isRequired,
  setFilter: PropTypes.func.isRequired,
  applyFilter: PropTypes.func.isRequired,
};

export default VideoTabs;
