import { Box, Button, Flex, Text } from '@chakra-ui/react';
import { LuDisc3 } from 'react-icons/lu';
import { MdEdit } from 'react-icons/md';
import { Route, Routes, useNavigate, useParams } from 'react-router-dom';

import { Covers } from '@/components/Cover';
import { EmptyEnd } from '@/components/EmptyEnd';
import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { SeasonEditPopUp } from '@/components/popup/AlbumEditPopUp';
import { MediaEditPopUp } from '@/components/popup/TrackEditPopUp';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { useColorModeValue } from '@/components/ui/color-mode';
import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
import { useActivePlaylistService, useSeasonVideo, useSpecificSeason } from '@/service';

export const SeasonDetailPage = () => {
  const { SeasonId } = useParams();
  const seasonIdInt = SeasonId ? parseInt(SeasonId, 10) : undefined;
  const { playInList } = useActivePlaylistService();
  const { dataSeason } = useSpecificSeason(seasonIdInt);
  const { seasonVideo } = useSeasonVideo(seasonIdInt);
  const navigate = useNavigate();
  const onSelectItem = (MediaId: number) => {
    //navigate(`/Series/${SeriesIdInt}/Season/${SeasonId}`);
    let currentPlay = 0;
    const listMediaId: number[] = [];
    if (!seasonVideo) {
      console.log('Fail to get Season...');
      return;
    }
    for (let iii = 0; iii < seasonVideo.length; iii++) {
      listMediaId.push(seasonVideo[iii].id);
      if (seasonVideo[iii].id === MediaId) {
        currentPlay = iii;
      }
    }
    playInList(currentPlay, listMediaId);
  };

  console.log(`dataSeason = ${JSON.stringify(dataSeason, null, 2)}`);
  if (!dataSeason) {
    return (
      <>
        <TopBar title="Season detail" />
        <PageLayoutInfoCenter>
          Fail to load Series id: {SeasonId}
        </PageLayoutInfoCenter>
      </>
    );
  }
  return (
    <>
      <TopBar title="Season detail">
        <Button
          {...BUTTON_TOP_BAR_PROPERTY}
          onClick={() =>
            navigate(`/Season/${SeasonId}/edit-Season/${dataSeason.id}`)
          }
        >
          <MdEdit />
        </Button>
      </TopBar>
      <PageLayout data-testid="Season-detail-page_layout">
        <Flex
          direction="row"
          width="80%"
          marginX="auto"
          padding="10px"
          gap="10px"
        >
          <Covers data={dataSeason?.covers} iconEmpty={<LuDisc3 />} slideshow />
          <Flex direction="column" width="80%" marginRight="auto">
            <Text fontSize="24px" fontWeight="bold">
              {dataSeason?.name}
            </Text>
            {dataSeason?.description && (
              <Text>Description: {dataSeason?.description}</Text>
            )}
            {/* {dataSeason?.publication && (
              <Text>first name: {dataSeason?.publication}</Text>
            )} */}
          </Flex>
        </Flex>

        <Flex
          direction="column"
          gap={BASE_WRAP_SPACING}
          marginX="auto"
          padding="20px"
          width="80%"
          data-testid="Season-detail-page_flex-list"
        >
          {seasonVideo?.map((data) => (
            <Box
              minWidth="100%"
              //height="60px"
              border="1px"
              borderColor="brand.900"
              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
            >
              {/* <DisplaySeasonFull
                media={{...data, dataId: "0-not-defined"}}
                onClick={() => onSelectItem(data.id)}
                contextMenu={[
                  {
                    name: 'Edit',
                    icon: <MdEdit />,
                    onClick: () => {
                      navigate(`/Season/${SeasonId}/edit-Media/${data.id}`);
                    },
                  },
                  {
                    icon: <MdAdd />,
                    name: 'Add Playlist',
                    onClick: () => {},
                  },
                ]}
                data-testid="Season-detail-page_display-detail"
              /> */}
            </Box>
          ))}
          <EmptyEnd />
        </Flex>
        <Routes>
          <Route path="edit-Media/:MediaId" element={<MediaEditPopUp />} />
          <Route path="edit-Season/:SeasonId" element={<SeasonEditPopUp />} />
        </Routes>
      </PageLayout>
    </>
  );
};
