'use client';

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

import {
  FocusedObjectContext,
  useFocusedObject,
} from '@/app/(root)/create/v2/useFocusedObject';
import CloseButton from '@/components/button/CloseButton';
import FocusedObjectPanel from '@/components/focusedObjectPanel/FocusedObjectPanel';
import {
  HorizontalPanelGroup,
  Panel,
} from '@/components/panelSystem/PanelSystem';
import makePanelSize from '@/components/studio/makePanelSize';
import useBreakpoint from '@/hooks/useBreakpoint';
import { LibraryTab } from '@/logging/eventTypes/PageViewedEventType';
import logWebUserEvent from '@/logging/logWebUserEvent';

import LibraryV2TrashPersonas from './LibraryV2TrashPersonas';
import LibraryV2TrashPlaylists from './LibraryV2TrashPlaylists';
import LibraryV2TrashSongs from './LibraryV2TrashSongs';

const Wrapper = styled.div`
  width: 100%;
  height: 100%;
`;

const tabs = [
  { label: 'Songs', key: 'songs', component: <LibraryV2TrashSongs /> },
  {
    label: 'Playlists',
    key: 'playlists',
    component: <LibraryV2TrashPlaylists />,
  },
  {
    label: 'Personas',
    key: 'personas',
    component: <LibraryV2TrashPersonas />,
  },
];

const TrashPage = observer(() => {
  const router = useRouter();

  const libraryUrl = '/me/v2';

  useEffect(() => {
    logWebUserEvent({
      actionName: 'PageViewed',
      componentContext: 'library-v2-trash',
      context: {
        tab: 'songs',
      },
    });
  }, []);

  const focusedObjectContext = useFocusedObject();
  const isWideEnoughForPanel = useBreakpoint(1000);

  return (
    <FocusedObjectContext.Provider value={focusedObjectContext}>
      <Wrapper>
        <HorizontalPanelGroup>
          <Panel size={makePanelSize(1, 'fr')}>
            <div className='flex h-full flex-col overflow-y-hidden'>
              <div className='flex items-center justify-between px-6 pt-4 pb-4'>
                <h1 className='text-3xl font-semibold text-foreground-primary'>
                  Trash
                </h1>
                <CloseButton onClick={() => router.push(libraryUrl)} />
              </div>

              <Tabs
                keyboardActivation='manual'
                defaultSelectedKey='songs'
                onSelectionChange={(key: Key) => {
                  const newTab = key as LibraryTab;

                  logWebUserEvent({
                    actionName: 'PageViewed',
                    componentContext: 'library-v2-trash',
                    context: {
                      tab: newTab,
                    },
                  });
                }}
                className='flex flex-1 flex-col overflow-y-hidden'
              >
                <div className='px-4'>
                  <div className='scrollbar-hide flex w-full items-center overflow-x-auto border-b border-border-primary'>
                    <TabList
                      aria-label='Trash tabs'
                      className='scrollbar-hide flex flex-row items-center gap-0'
                    >
                      {tabs.map((tab) => (
                        <Tab
                          id={tab.key}
                          key={tab.key}
                          className={({ isSelected }) =>
                            `group relative flex h-10 cursor-pointer items-center justify-center px-4 text-sm font-medium whitespace-nowrap transition-colors ${
                              isSelected
                                ? 'text-foreground-primary'
                                : 'text-foreground-secondary hover:text-foreground-primary'
                            }`
                          }
                        >
                          {({ isSelected }) => (
                            <>
                              {tab.label}
                              <div
                                className={`absolute right-0 bottom-0 left-0 h-0.5 bg-foreground-primary transition-opacity ${
                                  isSelected ? 'block' : 'hidden'
                                }`}
                              />
                            </>
                          )}
                        </Tab>
                      ))}
                    </TabList>
                  </div>
                </div>

                {tabs.map((tab) => (
                  <TabPanel
                    id={tab.key}
                    key={tab.key}
                    className='flex flex-1 flex-col overflow-y-scroll'
                  >
                    {tab.component}
                  </TabPanel>
                ))}
              </Tabs>
            </div>
          </Panel>
          <Panel
            size={
              focusedObjectContext.focusedObject && isWideEnoughForPanel
                ? makePanelSize(316, 'px')
                : makePanelSize(0, 'px')
            }
          >
            <div className='h-full pt-4 pr-4 pb-0'>
              <FocusedObjectPanel />
            </div>
          </Panel>
        </HorizontalPanelGroup>
      </Wrapper>
    </FocusedObjectContext.Provider>
  );
});

export default TrashPage;