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 { GenderEditPopUp } from '@/components/popup/GenderEditPopUp';
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificGender } from '@/service/Gender';
import { useTracksOfAGender } from '@/service/Track';
//import { useTracksOfAGender } from '@/service/Track';
import { useColorThemeValue } from '@/theme/ThemeContext';
import { Button, Flex, Text } from '@/ui';

export const GenderDetailPage = () => {
  const { genderId } = useParams();
  const genderIdInt = genderId ? parseInt(genderId, 10) : undefined;
  const { playInList } = useActivePlaylistService();
  const { dataGender } = useSpecificGender(genderIdInt);
  const { tracksOnAGender } = useTracksOfAGender(genderIdInt);
  const navigate = useNavigate();
  const onSelectItem = (trackId: number) => {
    //navigate(`/artist/${artistIdInt}/gender/${genderId}`);
    let currentPlay = 0;
    const listTrackId: number[] = [];
    if (!tracksOnAGender) {
      console.log('Fail to get gender...');
      return;
    }
    for (let iii = 0; iii < tracksOnAGender.length; iii++) {
      listTrackId.push(tracksOnAGender[iii].id);
      if (tracksOnAGender[iii].id === trackId) {
        currentPlay = iii;
      }
    }
    playInList(currentPlay, listTrackId);
  };

  console.log(`dataGender = ${JSON.stringify(dataGender, null, 2)}`);
  if (!dataGender) {
    return (
      <>
        <TopBar title="Gender detail" />
        <PageLayoutInfoCenter>
          Fail to load artist id: {genderId}
        </PageLayoutInfoCenter>
      </>
    );
  }
  return (
    <>
      <TopBar title="Gender detail">
        <Button
          {...BUTTON_TOP_BAR_PROPERTY}
          onClick={() =>
            navigate(`/gender/${genderId}/edit-gender/${genderId}`)
          }
        >
          <MdEdit />
        </Button>
      </TopBar>
      <PageLayout>
        <Flex
          direction="row"
          gap="10px"
          style={{
            width: "80%",
            margin: "0 auto",
            padding: "10px",
          }}
        >
          <Covers
            data={dataGender?.covers}
            // TODO: iconEmpty={LuDisc3}
            slideshow
          />
          <Flex direction="column" style={{ width: "80%", marginRight: "auto" }}>
            <Text fontSize="24px" fontWeight="bold">
              {dataGender?.name}
            </Text>
            {dataGender?.description && (
              <Text>Description: {dataGender?.description}</Text>
            )}
          </Flex>
        </Flex>

        <Flex
          direction="column"
          gap="20px"
          style={{
            margin: "0 auto",
            padding: "20px",
            width: "80%",
          }}
        >
          {tracksOnAGender?.map((data) => (
            <Flex
              key={data.id}
              style={{
                minWidth: "100%",
                //height="60px",
                border: "1px",
                borderColor: "brand.900",
                backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
                padding: "5px",
                // _hover: {
                //   boxShadow: 'outline-over',
                //   bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
                // }
              }}
            >
              <DisplayTrackFull
                track={data}
                onClick={() => onSelectItem(data.id)}
                contextMenu={[
                  {
                    name: 'Edit',
                    onClick: () => {
                      navigate(`/gender/${genderId}/edit-track/${data.id}`);
                    },
                  },
                  { name: 'Add Playlist', onClick: () => { } },
                ]}
              />
            </Flex>
          ))}
          <EmptyEnd />
        </Flex>
        <Routes>
          <Route path="edit-track/:trackId" element={<TrackEditPopUp />} />
          <Route path="edit-gender/:genderId" element={<GenderEditPopUp />} />
        </Routes>
      </PageLayout>
    </>
  );
};