import { Box, Button, Flex, HStack, 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 { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
//import { useMediasOfAType } from '@/service/Media';
import { DisplayMediaFull } from '@/components/media/DisplayMediaFull';
import { TypeEditPopUp } from '@/components/popup/GenderEditPopUp';
import { MediaEditPopUp } from '@/components/popup/TrackEditPopUp';
import { DisplaySeason } from '@/components/season/DisplaySeason';
import { useColorModeValue } from '@/components/ui/color-mode';
import {
  useActivePlaylistService,
  useSeasonWithSeries,
  useSpecificSeries,
  useSpecificType,
  useTypeSeriesGetVideo,
} from '@/service';

export const TypesSeriesDetailPage = () => {
  const { typeId, seriesId } = useParams();
  const typeIdInt = typeId ? parseInt(typeId, 10) : undefined;
  const seriesIdInt = seriesId ? parseInt(seriesId, 10) : undefined;
  const { playInList } = useActivePlaylistService();
  const { dataType } = useSpecificType(typeIdInt);
  const { dataSeries } = useSpecificSeries(seriesIdInt);
  const { videoWithType } = useTypeSeriesGetVideo(typeIdInt, seriesIdInt);
  const { seasonOfSeriesId } = useSeasonWithSeries(/*typeIdInt,*/ seriesIdInt);
  const navigate = useNavigate();
  const onSelectSeasonItem = (mediaId: number) => {
    navigate(`/type/${typeId}/series/${seriesId}/season/${mediaId}`);
  }
  const onSelectItem = (mediaId: number) => {
    let currentPlay = 0;
    const listMediaId: number[] = [];
      console.log(`select item:${mediaId}`);
    if (!videoWithType) {
      console.log('Fail to get Type...');
      return;
    }
    for (let iii = 0; iii < videoWithType.length; iii++) {
      listMediaId.push(videoWithType[iii].id);
      if (videoWithType[iii].id === mediaId) {
        currentPlay = iii;
      }
    }
    playInList(currentPlay, listMediaId);
  };

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

        <HStack
          wrap="wrap"
          gap="20px"
          marginX="auto"
          padding="20px"
          justify="center"
        >
          {seasonOfSeriesId?.map((data) => (
            <Box
            key={data.id}
            width="full"
              maxWidth="calc(min(450px,80%))"
              height="150px"
              border="1px"
              borderColor="brand.900"
              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectSeasonItem(data.id)}
            >
              <DisplaySeason
                dataSeason={data}
                // contextMenu={[
                //   {
                //     name: 'Edit',
                //     onClick: () => {
                //       navigate(`/Type/${TypeId}/edit-media/${data.id}`);
                //     },
                //   },
                //   { name: 'Add Playlist', onClick: () => {} },
                // ]}
              />
            </Box>
          ))}
          </HStack>
          <Box width="full" height="10px" background="red"/>
        <HStack
          wrap="wrap"
          gap="20px"
          marginX="auto"
          padding="20px"
          justify="center"
        >
          {videoWithType?.map((data) => (
            <Box
            key={data.id}
              width="200px"
              height="300px"
              border="1px"
              borderColor="brand.900"
              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
            >
              <DisplayMediaFull
                media={data}
                onClick={() => onSelectItem(data.id)}
                contextMenu={[
                  {
                    name: 'Edit',
                    onClick: () => {
                      navigate(
                        `/type/${typeId}/series/${seriesId}/edit-media/${data.id}`
                      );
                    },
                  },
                  { name: 'Add Playlist', onClick: () => {} },
                ]}
              />
            </Box>
          ))}
          <EmptyEnd />
        </HStack>
        <Routes>
          <Route path="edit-media/:mediaId" element={<MediaEditPopUp />} />
          <Route path="edit-type/:typeId" element={<TypeEditPopUp />} />
          {/* <Route path="edit-season/:seasonId" element={<TypeSeasonPopUp />} /> */}
        </Routes>
      </PageLayout>
    </>
  );
};
