'use client';

import { observer } from 'mobx-react-lite';
import { useRouter } from 'next/navigation';
import { Key, useState } from 'react';
import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components';

import { useStores } from '@/app/(root)/AppProviders';
import CloseButton from '@/components/button/CloseButton';
import TrashPersonaContent from '@/components/library/TrashPersonaContent';
import TrashPlaylistContent from '@/components/library/TrashPlaylistContent';
import TrashSongContent from '@/components/library/TrashSongContent';
import Pagination from '@/components/tab/Pagination';
import TitleText from '@/components/title/TitleText';
import usePageViewLog from '@/hooks/usePageViewLog';
import { LibraryTab } from '@/logging/eventTypes/PageViewedEventType';
import { DEFAULT_PAGE_SIZE, REACT_ARIA_TABS_STYLE } from '@/utils/constants';
import { isPersonaFeatureEnabled } from '@/utils/session';

const TrashFilters = observer(({}: { type?: string }) => {
  const { trash } = useStores();
  const maxPages = Math.ceil(trash.numTotalClips / DEFAULT_PAGE_SIZE);

  return (
    <Pagination
      page={trash.filters.page}
      onDecrementPage={() => {
        if (trash.filters.page > 0) trash.incrementPage(-1);
      }}
      onIncrementPage={() => {
        if (maxPages > trash.filters.page + 1) trash.incrementPage(1);
      }}
      setPageNumber={trash.setPageNumber}
      maxPages={maxPages}
      disableLeft={trash.filters.page === 0}
      disableRight={trash.filters.page + 1 >= maxPages}
    />
  );
});

const TrashPage = observer<any>(() => {
  const router = useRouter();
  const { library, session } = useStores();

  const [currentTab, setCurrentTab] = useState<LibraryTab>('songs');
  const libraryUrl = session.flags?.['library-v2-page'] ? '/me/v2' : '/me';

  usePageViewLog({
    actionName: 'PageViewed',
    componentContext: 'library-trash',
    context: {
      tab: currentTab,
    },
  });

  const tabs = [
    { label: 'Songs', key: 'songs', component: <TrashSongContent /> },
    {
      label: 'Playlists',
      key: 'playlists',
      component: <TrashPlaylistContent />,
    },
  ];

  if (isPersonaFeatureEnabled(session)) {
    tabs.push({
      label: 'Personas',
      key: 'personas',
      component: <TrashPersonaContent />,
    });
  }

  return (
    <div className='flex flex-1 flex-col overflow-y-auto'>
      <div className='flex w-full items-end justify-between px-6 pt-2 md:pb-4'>
        <div className='mt-0 flex items-center md:mt-8'>
          <TitleText text='Trash' />
        </div>
        <div className='pb-2 md:pb-4'>
          <CloseButton onClick={() => router.push(libraryUrl)} />
        </div>
      </div>
      <Tabs
        keyboardActivation='manual'
        onSelectionChange={(key: Key) => {
          setCurrentTab(key as LibraryTab);
          if (key === 'playlists') {
            library.updateFilters(
              {
                trashed: true,
              },
              'playlists'
            );
          }
        }}
        className='flex flex-col overflow-y-hidden'
      >
        <div className='mb-4 flex flex-row justify-between px-6'>
          <TabList
            aria-label='Trash tabs'
            className='scrollbar-hide flex h-12 w-full flex-row items-start gap-4 overflow-x-auto pt-3 pb-2 font-medium md:pt-2'
          >
            {tabs.map((tab) => (
              <Tab id={tab.key} className={REACT_ARIA_TABS_STYLE} key={tab.key}>
                {tab.label}
              </Tab>
            ))}
          </TabList>
          {currentTab === 'songs' && <TrashFilters />}
        </div>

        {tabs.map((tab) => (
          <TabPanel
            id={tab.key}
            key={tab.key}
            className='h-full overflow-y-scroll'
          >
            {tab.component}
          </TabPanel>
        ))}
      </Tabs>
    </div>
  );
});

export default TrashPage;