Buttons.tsx

import { Link } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { openThem } from "../utils/openThem";
import { openElement } from "../utils/openElement";
import { useNavigation } from "../utils/useNavigation";
interface UrlButtonProps{
    href: string,
    children: string,
  };
  interface TabButtonProps{
    classy?: string, 
    closing: string, 
    opentype: string
    /* children?: React.ReactNode,  */
    /* onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,  */
    name: string,
    type: string
  }

export function Villagebutton({ title, source, page }: { title: string; source: string; page:string}) {
  return (
      <Link className="btn village-style-button" role="button" to={page}>
        <img src={source} className="d-block mx-auto mb-2" alt=""></img>
        <h3>{title}</h3>
      </Link>
  )
}
 
export function Villbuttonrow(){
  return(
      <div className="small-row align-items-center bottom-buttons">
        <Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
        <Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
        <Villagebutton page="/materials-methods?scrollTo=introduction" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Methods"></Villagebutton>
        <Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
        <Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
        <Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
        <Villagebutton page="/results?tab=Abstract" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
      </div>  
  )
}


export const UrlButton = ({ href, children }:UrlButtonProps) => {
    return (
      <a href={href} className="url-button">
        {children}
      </a>
    );
  }




export const DownloadLink = ({ url, fileName }: {url: string, fileName: string}) => {
const handleDownload = () => {
    fetch(url)
    .then((response) => response.blob())
    .then((blob) => {
        const url = window.URL.createObjectURL(new Blob([blob]));
        const link = document.createElement("a");
        link.href = url;
        link.download = fileName || "downloaded-file";
        document.body.appendChild(link);

        link.click();

        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
    })
    .catch((error) => {
        console.error("Error fetching the file:", error);
    });
};
return (

  <a type="button" onClick={handleDownload} className="download-butt">
      <span>Download</span>
  </a>

);
};

export const DownloadImageButton = ({ url, fileName, children}: {url: string, fileName: string, children: React.ReactNode}) => {
  const handleDownload = () => {
      fetch(url)
      .then((response) => response.blob())
      .then((blob) => {
          const url = window.URL.createObjectURL(new Blob([blob]));
          const link = document.createElement("a");
          link.href = url;
          link.download = fileName || "downloaded-file";
          document.body.appendChild(link);
  
          link.click();
  
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
      })
      .catch((error) => {
          console.error("Error fetching the file:", error);
      });
  };
  
return (

    <a type="button" onClick={handleDownload} className="download-butt-image">
        {children}
    </a>

);
};



export function TabButtonRow({data, classy, opentype, closing}: {data: Array<TabDatensatz>, classy?: string, opentype: string, closing: string}){
  let rows: JSX.Element[]  = []
  for ( let i = 0;  i < data.length; i++ ){
    if(classy){
      rows.push(<TabButton classy={classy} type={data[i].cssname} name={data[i].buttonname} opentype={opentype} closing={closing}/>)
    }
    else{
      rows.push(<TabButton type={data[i].cssname} name={data[i].buttonname} opentype={opentype} closing={closing}/>)
    }
  }
  return <div className="align-items-center normal-buttons">
    {rows}
  </div>; 
}




// neuer 
export function TabButton({classy, name, closing, opentype, type}:TabButtonProps){
  if (!classy){
    classy = ""
  }
  let classname = "btn1 tabbutton " + type + " " + classy; 
  return(
    <>
    <button className={classname} onClick={openElement({elementToOpen: type, classToHide: opentype, classToClose: closing, buttonClass: "tabbutton" })}> {name}</button>
    </>
  )
}



export function BFHMoreButton({it}: {it: string}){
  return(
    <button className="tablinks btn1" onClick={expandIt({it})}> More</button>
  )
}

export function NewHPMoreButton({tab, scroll}: {tab: string, scroll: string}){
  const {goToPageWithTabAndScroll} = useNavigation(); 
  return(
    <button className="tablinks btn1" onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scroll})}> More</button>
  )
}

function expandIt({it}: {it: string}){
  const openit =  (_event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
    console.log(document.getElementById(it))
    console.log(document.getElementById(it)!.style.display)
    if (document.getElementById(it)!.style.display === "block"){
      document.getElementById(it)!.style.display = "none";
    }
    else if(document.getElementById(it)!.style.display === "none"){
      document.getElementById(it)!.style.display = "block";
    }
  }
  return openit; 
}



export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
  const { goToPagesAndOpenTab } = useNavigation();
  if (openclass) {
    return(
      <button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
    )
    
  }
  else{
    return(
        <button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
    )
  }
}

export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:string, scrollId: string,  open:string, openclass?: string}){
  const { goToPageWithTabAndScroll } = useNavigation();
  if (openclass) {
    return(
        <button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
    )
  }
  else{
    return(
      <div className="boxy-1">
        <span typeof="button" onClick={openFromOtherPage(open)}>
        <div className="btn-new btn-one">
        {text}
        </div></span>
      </div>
    )
  }
}


export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
  return(
    <button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
  )
}


export function ButtonFourFill(){
  return(
    <a type="button" className="icon icon-fill"><i className="fa fa-home"></i></a>
  )
}

export function ButtonFourEnter(){
  return(
    <a type="button" className="icon icon-enter"><i className="fa fa-home"></i></a>
  )
}
export function ButtonFourExpand(){
  return(
    <a type="button" className="icon icon-expand"><i className="fa fa-home"></i></a>
  )
}
export function ButtonFourCollapse(){
  return(
    <a type="button"  className="icon icon-collapse"><i className="fa fa-home"></i></a>
  )
}
export function ButtonFourRotate(){
  return(
    <a type="button" className="icon icon-rotate"><i className="fa fa-home"></i></a>
  )
}


export function BackUp(){
  return(
    <>
    <br/>
        <div className="col" id="eng-backup" style={{display: "flex", alignItems: "right"}}>
            <a onClick={() => scrollUpWithOffset()} className="backtotop">
                Back to Top &#8593;
            </a>
        </div>  
    </>
  )
}

function scrollUpWithOffset() {
  if (typeof window !== 'undefined') {
    const offset = window.innerHeight  ; // 50% der Viewport-Höhe
    const targetScrollPosition = Math.max(0,  offset); // Neue Scroll-Position, aber nicht unter 0

    console.log(`Scrolling up to position: ${targetScrollPosition}`);
    window.scrollTo({ top: targetScrollPosition, behavior: 'smooth' });
  }
}


export function ShowSolution({element}: {element: string}){

  return(
    <button onClick={flip(element)} className="quiz-button">Show solution</button>
  )
}

export function HideSolution({element}: {element: string}){
  return(
    <button onClick={flipBack(element)} className="quiz-button">Return to question</button>
  )
}

function flip(element: string){
  const flipp = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
    let elementToHide = document.getElementById("front-"+element);
        (elementToHide as HTMLElement).style.display = "none";
    let elementToFind = document.getElementById("back-"+element);
      (elementToFind as HTMLElement).style.display = "block";
  }
  return flipp; 
}

function flipBack(element: string){
  const flippback = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
    let elementToHide = document.getElementById("back-"+element);
        (elementToHide as HTMLElement).style.display = "none";
    let elementToFind = document.getElementById("front-"+element);
      (elementToFind as HTMLElement).style.display = "block";
  }
  return flippback;  
}