import { Button, Flex, HStack, Text } from '@chakra-ui/react';
import { LuUser } from 'react-icons/lu';
import { MdEdit, MdGroup } 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 { SeriesEditPopUp } from '@/components/popup/ArtistEditPopUp';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import {
  BASE_WRAP_SPACING
} from '@/constants/genericSpacing';
import { useSpecificSeries } from '@/service';

export const SeriesDetailPage = () => {
  const { SeriesId } = useParams();
  const SeriesIdInt = SeriesId ? parseInt(SeriesId, 10) : undefined;
  const navigate = useNavigate();
  const onSelectItem = (SeasonId: number) => {
    navigate(`/Series/${SeriesIdInt}/Season/${SeasonId}`);
  };
  const { dataSeries } = useSpecificSeries(SeriesIdInt);
  //const { SeasonIdsOfAnSeries } = useSeasonIdsOfAnSeries(SeriesIdInt);

  if (!dataSeries) {
    return (
      <>
        <TopBar title="Series detail" />
        <PageLayoutInfoCenter>
          Fail to load Series id: {SeriesId}
        </PageLayoutInfoCenter>
      </>
    );
  }
  return (
    <>
      <TopBar>
        <>
          <Button
            {...BUTTON_TOP_BAR_PROPERTY}
            marginRight="auto"
            onClick={() => navigate(`/Series/all`)}
          >
            <MdGroup height="full" />
            <Text fontSize="24px" fontWeight="bold">
              Series
            </Text>
          </Button>

          <Button
            {...BUTTON_TOP_BAR_PROPERTY}
            onClick={() =>
              navigate(`/Series/${SeriesId}/edit-Series/${SeriesId}`)
            }
          >
            <MdEdit />
          </Button>
        </>
      </TopBar>
      <PageLayout>
        <Flex
          direction="row"
          width="80%"
          marginX="auto"
          padding="10px"
          gap="10px"
        >
          <Covers data={dataSeries?.covers} iconEmpty={<LuUser />} slideshow />
          {/* <Flex direction="column" width="80%" marginRight="auto">
            <Text fontSize="24px" fontWeight="bold">
              {dataSeries?.name}
            </Text>
            {dataSeries?.description && (
              <Text>Description: {dataSeries?.description}</Text>
            )}
            {dataSeries?.firstName && (
              <Text>first name: {dataSeries?.firstName}</Text>
            )}
            {dataSeries?.surname && <Text>surname: {dataSeries?.surname}</Text>}
            {dataSeries?.birth && <Text>birth: {dataSeries?.birth}</Text>}
          </Flex> */}
        </Flex>

        <HStack
          wrap="wrap"
          gap={BASE_WRAP_SPACING}
          marginX="auto"
          padding="20px"
          justify="center"
        >
          {/* {SeasonIdsOfAnSeries?.map((data) => (
            <Flex
              align="flex-start"
              width={BASE_WRAP_WIDTH}
              height={BASE_WRAP_HEIGHT}
              border="1px"
              borderColor="brand.900"
              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
              key={data}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
              }}
              onClick={() => onSelectItem(data)}
            >
              <DisplaySeasonId id={data} key={data} />
            </Flex>
          ))} */}
        </HStack>
        <EmptyEnd />
        <Routes>
          <Route path="edit-Series/:SeriesId" element={<SeriesEditPopUp />} />
        </Routes>
      </PageLayout>
    </>
  );
};