adapte la partie return de Programmation pour que CarteProgrammation affiche aussi bien les artistes que les groupes, dans tout les cas il faudra se référer groupe.heurePassage et groupe.datePassage, et adapte la page PageArtiste.tsx qui va devoir afficher aussi bien les groupes avec la description du groupe descriptionG que les artistes avec descriptionA, je te fournis le structure de de données listeGropupes et listeArtistes de Programmation puis le code entier de ces 3 pages : listesArtistes : [
  {
    "descriptionA": "Description pour Vladimir Cauchemar",
    "idG": 1,
    "idMG": null,
    "nomDeSceneMG": "Vladimir Cauchemar",
    "nomMG": "Vlad",
    "prenomMG": "Cauchemar"
  },
  {
    "descriptionA": "Description pour Booba",
    "idG": 2,
    "idMG": null,
    "nomDeSceneMG": "Booba",
    "nomMG": "Booba",
    "prenomMG": "Elie"
  },
  {
    "descriptionA": "Description pour Freeze Corleone",
    "idG": 3,
    "idMG": null,
    "nomDeSceneMG": "Freeze Corleone",
    "nomMG": "Freeze",
    "prenomMG": "Hugo"
  },
  {
    "descriptionA": "Description pour Damso",
    "idG": 4,
    "idMG": null,
    "nomDeSceneMG": "Damso",
    "nomMG": "Damso",
    "prenomMG": "William"
  },
  {
    "descriptionA": "Description pour Ashe 22",
    "idG": 5,
    "idMG": null,
    "nomDeSceneMG": "Ashe 22",
    "nomMG": "Ashe",
    "prenomMG": "Achille"
  },
  {
    "descriptionA": "Description pour Heuss lEnfoiré",
    "idG": 6,
    "idMG": null,
    "nomDeSceneMG": "Heuss l'Enfoiré",
    "nomMG": "Heuss",
    "prenomMG": "Karim"
  },
  {
    "descriptionA": "Description pour Zola",
    "idG": 7,
    "idMG": null,
    "nomDeSceneMG": "Zola",
    "nomMG": "Zola",
    "prenomMG": "Evans"
  },
  {
    "descriptionA": "Description pour Sch",
    "idG": 8,
    "idMG": null,
    "nomDeSceneMG": "Sch",
    "nomMG": "Sch",
    "prenomMG": "Julien"
  },
  {
    "descriptionA": "Description pour H Jeunecrack",
    "idG": 9,
    "idMG": null,
    "nomDeSceneMG": "H Jeunecrack",
    "nomMG": "H",
    "prenomMG": "Hugo"
  },
  {
    "descriptionA": "Description pour Luther",
    "idG": 10,
    "idMG": null,
    "nomDeSceneMG": "Luther",
    "nomMG": "Luther",
    "prenomMG": "Luther"
  }
] listeGroupe : 
[
  {
    "descriptionG": "Desc",
    "idG": 1,
    "idH": null,
    "nomG": "Vladimir Cauchemar",
    "datePassage": "2023-07-21",
    "heurePassage": "09:00:00"
  },
  {
    "descriptionG": "Desc",
    "idG": 2,
    "idH": null,
    "nomG": "Booba",
    "datePassage": "2023-07-21",
    "heurePassage": "13:00:00"
  },
  {
    "descriptionG": "Desc",
    "idG": 3,
    "idH": null,
    "nomG": "Freeze Corleone",
    "datePassage": "2023-07-21",
    "heurePassage": "17:00:00"
  },
  {
    "descriptionG": "Desc",
    "idG": 4,
    "idH": null,
    "nomG": "Damso",
    "datePassage": "2023-07-22",
    "heurePassage": "09:00:00"
  },
  {
    "descriptionG": "Desc",
    "idG": 5,
    "idH": null,
    "nomG": "Ashe 22",
    "datePassage": "2023-07-22",
    "heurePassage": "13:00:00"
  },
  {
    "descriptionG": "Desc",
    "idG": 6,
    "idH": null,
    "nomG": "Heuss l'Enfoiré",
    "datePassage": "2023-07-22",
    "heurePassage": "17:00:00"
  },
  {
    "descriptionG": "Desc",
    "idG": 7,
    "idH": null,
    "nomG": "Zola",
    "datePassage": "2023-07-23",
    "heurePassage": "08:00:00"
  },
  {
    "descriptionG": "Desc",
    "idG": 8,
    "idH": null,
    "nomG": "Sch",
    "datePassage": "2023-07-23",
    "heurePassage": "11:00:00"
  },
  {
    "descriptionG": "Desc",
    "idG": 9,
    "idH": null,
    "nomG": "H Jeunecrack",
    "datePassage": "2023-07-23",
    "heurePassage": "14:00:00"
  },
  {
    "descriptionG": "Desc",
    "idG": 10,
    "idH": null,
    "nomG": "Luther",
    "datePassage": "2023-07-23",
    "heurePassage": "17:00:00"
  }
]import {useEffect, useState, useRef, useLayoutEffect} from 'react'
import SearchBar from '../../components/form/SearchBar';
import Combo from '../../components/form/Combo';
import CarteArtiste from '../../components/Artiste/CarteProgrammation';
import { motion } from 'framer-motion';
import { useLocation } from 'react-router-dom';
import axios from 'axios';
import Footer from '../../components/footer';

type Props = {
    isNavInFocus: boolean;
    setIsNavTransparent: (isNavTransparent : boolean) => void;
}

type Groupe = {
  idG: number;
  nomG: string;
  descriptionG: string;
  datePassage: string;
  heurePassage: string;
}

type Artiste = {
  descriptionA?: string;
  idMG?: number;
  idG: number;
  nomDeSceneMG: string;
  nomMG: string;
  prenomMG?: string;
  datePassage?: string;
  heurePassage?: string;
};

type Evenement = {
  dateDebutE: string;
  dateFinE: string;
  heureDebutE: string,
  heureFinE: string,
  idE: number;
  idG: number;
  idL: number | null;
  nomE: string;
};


type Programme = Groupe | Evenement | Artiste;

export default function Programmation(props : Props) {
  const location = useLocation();
  const idArtistComingFrom = location.state?.comesFromPageArtist;
  const oldX = location.state?.oldX;
  const oldY = location.state?.oldY;
  const oldGroupes = location.state?.oldGroupes;


  window.history.replaceState({}, document.title)
  const[lesGroupes, setLesGroupes] = useState<Groupe[]>(location.state? oldGroupes : []);
  const [lesArtistes, setLesArtistes] = useState<Artiste[]>([]);
  

  useEffect(() => {
    axios.get('http://localhost:8080/getGroupesWithEvenements').then((res) => {
      const groupedData = res.data as Programme[][];

      const listeGroupes: Groupe[] = [];
      const listeArtistes: Artiste[] = [];
      console.log(groupedData);
  
      groupedData.forEach((groupArray) => {
        let groupeObj: Partial<Groupe> = {};
        let artisteObj: Partial<Artiste> = {};
  
        groupArray.forEach((item) => {
          if ('nomG' in item) {
            groupeObj = { ...groupeObj, ...item }; // Copier les infos du groupe
          } else if ('nomDeSceneMG' in item) {
            artisteObj = { ...artisteObj, ...item }; // Copier les infos de l'artiste
          } else if ('dateDebutE' in item) {
            // S'assurer que l'évènement correspond au groupe ou à l'artiste actuellement traité
            const datePassage = item.dateDebutE; 
            const heurePassage = item.heureDebutE;
            if (groupeObj.idG === item.idG) {
              groupeObj.datePassage = datePassage;
              groupeObj.heurePassage = heurePassage;
            }
            if (artisteObj.idG === item.idG) {
              artisteObj.datePassage = datePassage;
              artisteObj.heurePassage = heurePassage;
            }
          }
        });
          if (groupeObj.idG != null) {
          listeGroupes.push(groupeObj as Groupe); 
        }
        if (artisteObj.nomDeSceneMG != null) {
          listeArtistes.push(artisteObj as Artiste); 
        }
      });
  
      setLesGroupes(listeGroupes);
      setLesArtistes(listeArtistes);
      console.log("listeArtistes : ")
      console.log(listeArtistes)
      console.log("listeGroupes : ")
      console.log(listeGroupes)

    });
  }, []);

  const[filtreDate, setFiltreDate] = useState("Tout");
  const[filtreAffichage, setFiltreAffichage] = useState("Grille");
  const[filtreGenre, setFiltreGenre] = useState("Tout");

  const pageRef = useRef<HTMLDivElement>(null);
  
  
  const contentVariants = {
    visible:{
      filter: "blur(0px)",
      scale:1,
      zIndex:1,
      transition:{
        duration:0.5,
        ease: [1, 0, 0,1]
      }
    },
    hidden:{
      filter:"blur(10px)",
      scale:0.8,
      zIndex:-1,
      transition:{
        duration:0.5,
        ease: [1, 0, 0,1]
      }
    }
  }

  useEffect(() => {
    window.scrollTo(0, 0)
    props.setIsNavTransparent(false)
  }, [])

  return (
    <>
    <motion.div id="Programmation"
    className='page-defaut'
    variants={contentVariants}
    animate={props.isNavInFocus ? "hidden" : "visible"}
    ref={pageRef}
    >
        <header>
            <div className="title">
                <h2>PROGRAMMATION</h2>
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M62.9991 27.739L42.1815 27.7675L56.8787 13.0286L50.7001 6.86056L36.0029 21.5994L35.9744 0.785744L27.2406 0.797718L27.2692 21.6114L12.5316 6.91288L6.36413 13.0979L21.1017 27.7964L0.289932 27.825L0.301899 36.5537L21.1137 36.5251L6.41646 51.2641L12.6009 57.4321L27.2981 42.6932L27.3266 63.5069L36.0603 63.4949L36.0318 42.6812L50.7694 57.3798L56.931 51.1948L42.1934 36.4962L63.011 36.4677L62.9991 27.739Z" fill="#FFD600"/>
                </svg>
            </div>
            <div className="filters-container">
                <div className="filters">
                    <Combo title="DATE" choices={["Tout", "21 Juillet", "22 Juillet", "23 Juillet"]} currentChoice={filtreDate} setCurrentChoice={setFiltreDate} />
                    <Combo title="AFFICHAGE" choices={["Grille", "Horaires"]} currentChoice={filtreAffichage} setCurrentChoice={setFiltreAffichage} />
                    <Combo title="GENRE" choices={["Tout", "Rap", "Rock", "Pop"]} currentChoice={filtreGenre} setCurrentChoice={setFiltreGenre} />
                </div>
                <SearchBar text="Rechercher un artiste"/>
            </div>
        </header>
        <main className='liste-artistes'>
            {
              lesGroupes.map((groupe, index) => {
                return(
                  <CarteArtiste oldGroupes={lesGroupes} key={groupe.idG} id={groupe.idG} oldX={idArtistComingFrom == groupe.idG ? oldX : null} oldY={idArtistComingFrom == groupe.idG ? oldY : null} comesFromPageArtist={idArtistComingFrom == groupe.idG} nomArtiste={groupe.nomG} date={groupe.datePassage} heure={groupe.heurePassage} setIsNavTransparent={props.setIsNavTransparent} />
                )
              })
            }
        </main>
    </motion.div>
    <Footer/>
    </>
  )
}


[
  [
    {
      "descriptionG": "Desc",
      "idG": 1,
      "idH": null,
      "nomG": "Vladimir Cauchemar"
    },
    {
      "dateDebutE": "2023-07-21",
      "dateFinE": "2023-07-21",
      "heureDebutE": "09:00:00",
      "heureFinE": "10:00:00",
      "idE": 1,
      "idG": 1,
      "idL": null,
      "nomE": "Concert Groupe 1"
    },
    {
      "descriptionA": "Description pour Vladimir Cauchemar",
      "idG": 1,
      "idMG": null,
      "nomDeSceneMG": "Vladimir Cauchemar",
      "nomMG": "Vlad",
      "prenomMG": "Cauchemar"
    }
  ],
  [
    {
      "descriptionG": "Desc",
      "idG": 2,
      "idH": null,
      "nomG": "Booba"
    },
    {
      "dateDebutE": "2023-07-21",
      "dateFinE": "2023-07-21",
      "heureDebutE": "13:00:00",
      "heureFinE": "14:00:00",
      "idE": 2,
      "idG": 2,
      "idL": null,
      "nomE": "Concert Groupe 2"
    },
    {
      "descriptionA": "Description pour Booba",
      "idG": 2,
      "idMG": null,
      "nomDeSceneMG": "Booba",
      "nomMG": "Booba",
      "prenomMG": "Elie"
    }
  ],
  [
    {
      "descriptionG": "Desc",
      "idG": 3,
      "idH": null,
      "nomG": "Freeze Corleone"
    },
    {
      "dateDebutE": "2023-07-21",
      "dateFinE": "2023-07-21",
      "heureDebutE": "17:00:00",
      "heureFinE": "18:00:00",
      "idE": 3,
      "idG": 3,
      "idL": null,
      "nomE": "Concert Groupe 3"
    },
    {
      "descriptionA": "Description pour Freeze Corleone",
      "idG": 3,
      "idMG": null,
      "nomDeSceneMG": "Freeze Corleone",
      "nomMG": "Freeze",
      "prenomMG": "Hugo"
    }
  ],
  [
    {
      "descriptionG": "Desc",
      "idG": 4,
      "idH": null,
      "nomG": "Damso"
    },
    {
      "dateDebutE": "2023-07-22",
      "dateFinE": "2023-07-22",
      "heureDebutE": "09:00:00",
      "heureFinE": "10:00:00",
      "idE": 4,
      "idG": 4,
      "idL": null,
      "nomE": "Concert Groupe 4"
    },
    {
      "descriptionA": "Description pour Damso",
      "idG": 4,
      "idMG": null,
      "nomDeSceneMG": "Damso",
      "nomMG": "Damso",
      "prenomMG": "William"
    }
  ],
  [
    {
      "descriptionG": "Desc",
      "idG": 5,
      "idH": null,
      "nomG": "Ashe 22"
    },
    {
      "dateDebutE": "2023-07-22",
      "dateFinE": "2023-07-22",
      "heureDebutE": "13:00:00",
      "heureFinE": "14:00:00",
      "idE": 5,
      "idG": 5,
      "idL": null,
      "nomE": "Concert Groupe 5"
    },
    {
      "descriptionA": "Description pour Ashe 22",
      "idG": 5,
      "idMG": null,
      "nomDeSceneMG": "Ashe 22",
      "nomMG": "Ashe",
      "prenomMG": "Achille"
    }
  ],
  [
    {
      "descriptionG": "Desc",
      "idG": 6,
      "idH": null,
      "nomG": "Heuss l'Enfoiré"
    },
    {
      "dateDebutE": "2023-07-22",
      "dateFinE": "2023-07-22",
      "heureDebutE": "17:00:00",
      "heureFinE": "18:00:00",
      "idE": 6,
      "idG": 6,
      "idL": null,
      "nomE": "Concert Groupe 6"
    },
    {
      "descriptionA": "Description pour Heuss lEnfoiré",
      "idG": 6,
      "idMG": null,
      "nomDeSceneMG": "Heuss l'Enfoiré",
      "nomMG": "Heuss",
      "prenomMG": "Karim"
    }
  ],
  [
    {
      "descriptionG": "Desc",
      "idG": 7,
      "idH": null,
      "nomG": "Zola"
    },
    {
      "dateDebutE": "2023-07-23",
      "dateFinE": "2023-07-23",
      "heureDebutE": "08:00:00",
      "heureFinE": "09:00:00",
      "idE": 7,
      "idG": 7,
      "idL": null,
      "nomE": "Concert Groupe 7"
    },
    {
      "descriptionA": "Description pour Zola",
      "idG": 7,
      "idMG": null,
      "nomDeSceneMG": "Zola",
      "nomMG": "Zola",
      "prenomMG": "Evans"
    }
  ],
  [
    {
      "descriptionG": "Desc",
      "idG": 8,
      "idH": null,
      "nomG": "Sch"
    },
    {
      "dateDebutE": "2023-07-23",
      "dateFinE": "2023-07-23",
      "heureDebutE": "11:00:00",
      "heureFinE": "12:00:00",
      "idE": 8,
      "idG": 8,
      "idL": null,
      "nomE": "Concert Groupe 8"
    },
    {
      "descriptionA": "Description pour Sch",
      "idG": 8,
      "idMG": null,
      "nomDeSceneMG": "Sch",
      "nomMG": "Sch",
      "prenomMG": "Julien"
    }
  ],
  [
    {
      "descriptionG": "Desc",
      "idG": 9,
      "idH": null,
      "nomG": "H Jeunecrack"
    },
    {
      "dateDebutE": "2023-07-23",
      "dateFinE": "2023-07-23",
      "heureDebutE": "14:00:00",
      "heureFinE": "15:00:00",
      "idE": 9,
      "idG": 9,
      "idL": null,
      "nomE": "Concert Groupe 9"
    },
    {
      "descriptionA": "Description pour H Jeunecrack",
      "idG": 9,
      "idMG": null,
      "nomDeSceneMG": "H Jeunecrack",
      "nomMG": "H",
      "prenomMG": "Hugo"
    }
  ],
  [
    {
      "descriptionG": "Desc",
      "idG": 10,
      "idH": null,
      "nomG": "Luther"
    },
    {
      "dateDebutE": "2023-07-23",
      "dateFinE": "2023-07-23",
      "heureDebutE": "17:00:00",
      "heureFinE": "18:00:00",
      "idE": 10,
      "idG": 10,
      "idL": null,
      "nomE": "Concert Groupe 10"
    },
    {
      "descriptionA": "Description pour Luther",
      "idG": 10,
      "idMG": null,
      "nomDeSceneMG": "Luther",
      "nomMG": "Luther",
      "prenomMG": "Luther"
    }
  ]
]import { motion } from 'framer-motion'
import {useState,useRef, useEffect} from 'react'
import { Link } from 'react-router-dom'

type Props = {
    id:number,
    date: string,
    heure: string,
    nomArtiste: string,
    setIsNavTransparent: (isNavTransparent : boolean) => void;
    comesFromPageArtist?: boolean;
    oldX?: number;
    oldY?: number;
    oldGroupes?: Groupe[];
}

type Groupe = {
    idG: number;
    nomG: string;
    descriptionG: string;
    datePassage: string;
    heurePassage: string;
  }

export default function CarteProgrammation(props: Props) {
  // change le nomArtiste en majuscule et remplace les espaces par des retours à la ligne
  const nomArtiste = props.nomArtiste.toUpperCase().split(" ")
  const[isHovered, setIsHovered] = useState(false)
  const[isSwitching, setIsSwitching] = useState(false)
  const[delay, setDelay] = useState(props.comesFromPageArtist? 0.2 : 0)
  const refCarte = useRef<HTMLDivElement>(null);
  const[zIndexCard, setZIndexCard] = useState(props.comesFromPageArtist ? 99 : 1)

  useEffect(() => {
    
    setTimeout(() => {
        console.log(props.date)
        console.log(props.heure)

        setZIndexCard(1)
        setDelay(0)
    }, 600);
    
  }, [])
  

  const titleVariants = {
    hover:{
        fontSize: "2.3rem",
        color:"#FFD600",
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    default:{
        fontSize: "2.3rem",
        color:"#FFFBEE",
        transition:{
            delay:delay,
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    exit:{
        fontSize: "7.625rem",
        color:"#FFD600",
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    }
  }

  // fais le variant pour l'image de l'artiste (scale 1.2 sur hover)
    const imageVariants = {
        hover:{
            scale:1.3,
            transition:{
                duration:0.4,
                ease: [1, 0, 0,1]
            }
        },
        default:{
            scale:1,
            transition:{
                duration:0.4,
                ease: [1, 0, 0,1]
            }
        }
    }

  // fais le variant pour le texte de dateHeure (x 2rem sur hover)

  const dateHeureVariants = {
    hover:{
        y:"0rem",
        fontSize: "1.875rem",
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    default:{
        y:(window.innerWidth <= 576 ? 3.1 : 2.9).toString() + "rem",
        fontSize: "1.875rem",
        transition:{
            delay:delay,
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    exit:{
        y:"0rem",
        fontSize: "4.6875rem",
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    }
  }

  // default font-size: 1.875rem;
  // exit font-size: 4.6875rem;

  const heureVariants = {
    hover:{
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    default:{
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
  }

  const carteVariants = {
    default:{
        zIndex:zIndexCard,
        width: "24rem",
        height: "15.5rem",
        y:0,
        x:0,
        transition:{
            delay:0.2,
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    exit:{
        x: refCarte.current? -refCarte.current.offsetLeft : props.oldX? -props.oldX : 0,
        y: refCarte.current? -refCarte.current.offsetTop : props.oldY? -props.oldY : 0,
        height: "100vh",
        width: "100vw",
        zIndex:99,
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    }
  }

  const textVariants = {
    default:{
        padding: "0.5rem 1rem",
        transition:{
            delay:delay*2,
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    exit:{
        padding: "3rem",
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    }
  }


  return (
    <motion.div
    className="outer-carte-artiste"
    ref={refCarte}
    variants={carteVariants}
    initial={props.comesFromPageArtist ? "exit" : "default"}
    animate="default"
    exit={isSwitching ? "exit" : "default"}
    onClick={() => window.scrollTo(0,0)}
    >
        <Link className="carte-artiste"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        to={{
            pathname:"/artiste",
            search:`?id=${props.id}`,
        }}
        state={{
            nomArtiste: props.nomArtiste,
            date: props.date,
            heure: props.heure,
            oldX: refCarte.current?.offsetLeft,
            oldY: refCarte.current?.offsetTop,
            oldGroupes: props.oldGroupes
        }}
        onClick={() => {props.setIsNavTransparent(true); setIsSwitching(true)}}
        >
            <motion.img 
            src={"http://localhost:8080/getImageArtiste/" + props.id} 
            alt="image de l'artiste" 
            variants={imageVariants}
            initial="default"
            animate={isHovered ? "hover" : "default"}
            exit="default"
            />
            <motion.div className="texts"
            variants={textVariants}
            initial={props.comesFromPageArtist ? "exit" : "default"}
            animate="default"
            exit={isSwitching ? "exit" : "default"}
            >
                <motion.h3
                variants={titleVariants}
                initial={props.comesFromPageArtist ? "exit" : "default"}
                animate={isHovered ? "hover" : "default"}
                exit={isSwitching ? "exit" : "default"}
                >{
                    nomArtiste.map((mot, index) => {
                        return(
                            <span key={index}>{mot}<br/></span>
                        )
                    })
                }</motion.h3>
                
                <motion.div className="date-heure"
                variants={dateHeureVariants}
                initial={props.comesFromPageArtist ? "exit" : "default"}
                animate={isHovered ? "hover" : "default"}
                exit={isSwitching ? "exit" : "default"}
                >
                    <h4
                    >{props.date}</h4>

                    <motion.h4 
                    variants={heureVariants} 
                    initial="default"
                    animate={isHovered ? "hover" : "default"}
                    exit={isSwitching ? "exit" : "default"}
                    >{props.heure}</motion.h4>

                </motion.div>
            </motion.div>
        </Link>
    </motion.div>
  )
}
import {useEffect, useState, useRef} from 'react'
import { Link, useLocation } from 'react-router-dom'
import BoutonReseau from '../../components/Artiste/BoutonReseau'
import { motion } from 'framer-motion'


export default function PageArtiste() {
  
    const location = useLocation();
    const oldX = location.state?.oldX;
    const oldY = location.state?.oldY;
    const oldGroupes = location.state?.oldGroupes;
    const[nomArtiste, setNomArtiste] = useState(location.state?.nomArtiste)
    const[date, setDate] = useState(location.state?.date)
    const[heure, setHeure] = useState(location.state?.heure)
    const[description, setDescription] = useState("Tame Impala est un projet musical australien originaire de Perth, créé en 2007 et dirigé par le musicien multi-instrumentiste Kevin Parker. Parker écrit, joue, produit et enregistre la musique seul en studio d'enregistrement. En tournée, il est accompagné de différents musiciens. Tame Impala est né du précédent groupe de Kevin Parker, Dee Dee Dums, qui mêlait des influences blues, jazz et rock psychédélique. Ce groupe était formé de Parker à la guitare et de Luke Epstein à la batterie. Ils remportent la deuxième place au AmpFest de 20051, et terminent troisième la même année au cours de la finale nationale de The Next Big Thing2. En octobre 2006, les Dee Dee Dums remportent la finale nationale de la National Campus Band Competition3.")
    const titleRef = useRef<HTMLHeadingElement>(null);

    const params = new URLSearchParams(window.location.search)
    const idArtiste = params.get('id')

    const[windowWidth, setWindowWidth] = useState(window.innerWidth)
    const[infosGridPosition, setInfosGridPosition] = useState<"top" | "bottom">("top")

    useEffect(() => {
      
      const handleResize = () => {
        setWindowWidth(window.innerWidth)
      }

      window.addEventListener('resize', handleResize)
    
      return () => {    
        window.removeEventListener('resize', handleResize)
      }
    }, [])
    
    useEffect(() => {
      if(titleRef.current){
        // regarde si la width du titre est plus grande que 25% de la width de la fenetre - 2*3rem
        if(titleRef.current.offsetWidth > windowWidth/4 - 2*3*16){
          setInfosGridPosition("top")
        }
        else{
            setInfosGridPosition("bottom")
        }
      }
    }, [titleRef, windowWidth])
    

    const infosVariants = {
        initial:{
            opacity:0,
            transition:{
                duration:0.1,
                ease: "easeInOut"
            }
        },
        visible:{
            opacity:1,
            transition:{
                delay: 0.8,
                duration:0.6,
                ease: "easeInOut"
            }
        }
    }
  
    const overlayVariants = {
        initial:{
            background:"linear-gradient(to top, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0) 60%)",
            transition:{
                duration:0.1,
                ease: "easeInOut"
            }
        },
        extended:{
            background:"linear-gradient(to top, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%)",
            transition:{
                delay: 0.6,
                duration:0.6,
                ease: "easeInOut"
            }
        }
    }

    return (
    <div id='PageArtiste'>
      <motion.div className="overlay"
      variants={overlayVariants}
    initial="initial"
    animate={infosGridPosition === "top" ? "extended" : "initial"}
      />

      <img src={"http://localhost:8080/getImageArtiste/"+idArtiste} alt="image de fond" />
      <div className="content"
      style={{
        columnGap: infosGridPosition === "top" ? "0" : "5rem",
        rowGap: windowWidth > 991 ? "0" : "5rem",
    }}
      >
        <h3 ref={titleRef}>
        {
        nomArtiste.toUpperCase().split(" ").map((mot : string, index:number) => {
            return(
                <span key={index}>{mot}<br/></span>
            )
        })
    }
        </h3>
        <motion.div className="infos"
        variants={infosVariants}
        initial="initial"
        animate="visible"
        exit="initial"
        style={{gridArea : infosGridPosition}}
        >
            <p className='description'>
            Tame Impala est un projet musical australien originaire de Perth, créé en 2007 et dirigé par le musicien multi-instrumentiste Kevin Parker. Parker écrit, joue, produit et enregistre la musique seul en studio d'enregistrement. En tournée, il est accompagné de différents musiciens.
Tame Impala est né du précédent groupe de Kevin Parker, Dee Dee Dums, qui mêlait des influences blues, jazz et rock psychédélique. Ce groupe était formé de Parker à la guitare et de Luke Epstein à la batterie. Ils remportent la deuxième place au AmpFest de 20051, et terminent troisième la même année au cours de la finale nationale de The Next Big Thing2. En octobre 2006, les Dee Dee Dums remportent la finale nationale de la National Campus Band Competition3.
            </p>
            <div className="les-reseaux">
                <BoutonReseau href="https://www.soundcloud.com/" type='soundcloud' />
                <BoutonReseau href="https://www.spotify.com/" type='spotify'/>
                <BoutonReseau href="https://www.instagram.com/" type='instagram'/>
                <BoutonReseau href="https://www.twitter.com/" type='twitter'/>
                <BoutonReseau href="https://www.youtube.com/" type='youtube'/>
            </div>
            <Link to="/programmation"
            state={{
                comesFromPageArtist:idArtiste,
                oldX: oldX,
                oldY: oldY,
                oldGroupes: oldGroupes
            }}
            className='btn-retour'>
                <svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="6.52539" y="0.321533" width="35.8974" height="3.58974" rx="1.79487" transform="rotate(45 6.52539 0.321533)"/>
                    <rect x="3.87891" y="25.5957" width="35.8974" height="3.58974" rx="1.79487" transform="rotate(-45 3.87891 25.5957)"/>
                </svg>
            </Link>
           

        </motion.div>
        <div className="date-heure">
            <h4>{date}</h4>
            <h4>{heure}</h4>
        </div>
      </div>
    </div>
  )
}