import { Route, Routes, useNavigate } from 'react-router-dom';

import { EmptyEnd } from '@/components/EmptyEnd';
import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { TopBar } from '@/components/TopBar/TopBar';
import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp';
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useColorThemeValue } from '@/theme/ThemeContext';
import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
import { DisplayTrackFullId } from '@/components/track/DisplayTrackFullId';
import { Flex } from '@/ui';

export const OnAirPage = () => {
  const { playInList } = useActivePlaylistService();
  const { playTrackList, trackOffset, setNewPlaylist } = useActivePlaylistService();
  const navigate = useNavigate();
  const onSelectItem = (trackId: number) => {
    let currentPlay = 0;
    if (!playTrackList) {
      console.log('Fail to get list of on air...');
      return;
    }
    for (let iii = 0; iii < playTrackList.length; iii++) {
      if (playTrackList[iii] === trackId) {
        currentPlay = iii;
      }
    }
    playInList(currentPlay, playTrackList);
  };
  const removeTrack = (trackId: number) => {
    let elementToRemoveOffset = 0;
    if (!playTrackList) {
      console.log('Fail to remove element of on air...');
      return;
    }
    const newList: number[] = [];
    for (let iii = 0; iii < playTrackList.length; iii++) {
      if (playTrackList[iii] === trackId) {
        elementToRemoveOffset = iii;
      } else {
        newList.push(playTrackList[iii])
      }
    }
    let newPlayed = trackOffset;
    if (newPlayed != undefined) {
      if (elementToRemoveOffset < newPlayed) {
        newPlayed = newPlayed - 1;
      }
      playInList(newPlayed, newList);
    } else {
      setNewPlaylist(newList);
    }
  };

  console.log(`playTrackList = ${JSON.stringify(playTrackList, null, 2)}`);
  if (!playTrackList) {
    return (
      <>
        <TopBar title="Album detail" />
        <PageLayoutInfoCenter>
          No data is currently playing...
        </PageLayoutInfoCenter>
      </>
    );
  }
  return (
    <>
      <TopBar title="On Air ...">
      </TopBar>
      <PageLayout>
        <Flex
          direction="column"
          gap={BASE_WRAP_SPACING}
          style={{
            margin: "0 auto",
            padding: "20px",
            width: "80%",
          }}
        >
          {!playTrackList && <>No playing</>}
          {playTrackList && playTrackList?.map((data) => (
            <Flex
              key={data}
              style={{
                minWidth: "100%",
                //height:"60px",
                border: "1px",
                borderColor: "brand.900",
                backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
                padding: "5px",
                // _hover: {
                //   boxShadow: 'outline-over',
                //   bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
                // }
              }}
            >
              <DisplayTrackFullId
                trackId={data}
                onClick={() => onSelectItem(data)}
                contextMenu={[
                  {
                    name: 'Edit',
                    onClick: () => {
                      navigate(`edit-track/${data}`);
                    },
                  },
                  {
                    name: 'Remove from playlist',
                    onClick: () => {
                      removeTrack(data);
                    },
                  },
                ]}
              />
            </Flex>
          ))}
          <EmptyEnd />
        </Flex>
        <Routes>
          <Route path="edit-track/:trackId" element={<TrackEditPopUp />} />
          <Route path="edit-album/:albumId" element={<AlbumEditPopUp />} />
        </Routes>
      </PageLayout>
    </>
  );
};
