import React from 'react'
import { Container, Header } from 'semantic-ui-react';
import '../css/mainpagecss.css';
import Footer from './Footer';
import OrganisationCard from './OrganisationCard';
import { VerticleButton as ScrollUpButton } from 'react-scroll-up-button';
import { Link } from 'react-router-dom'

function Bookmarked({bookmarked, setBookmarked}) {

    const descendingSortByYear = (resultList) =>{
        return resultList.sort( (a,b) => { 
            return (b.year.length - a.year.length)
          });
      }

    return (
    <React.Fragment>
      <Container id='mainContainer' fluid>
        <Header id='mainHeader' as='h1' textAlign='center'>
          GSoC Analyzer
        </Header>
      <Link to="/" className="nav-button">Home</Link>

        <Container fluid style={{ paddingTop: 50 }}>
            <Header
              style={{ color: 'white', fontSize: 50 }}
              textAlign='center'
              as='h1'
            >
              Bookmarked Organizations: {bookmarked.length}
            </Header>
            <br />
            {bookmarked.length != 0 ? descendingSortByYear(bookmarked).map((org, index) => (
              <OrganisationCard key={index} orgData={org} bookmarked={bookmarked} setBookmarked={setBookmarked} />
            )) : 
            <div className="no-bookmarks-msg">
              No organizations bookmarked yet
            </div>}
          </Container>
        <ScrollUpButton style={{ color: 'white' }} />
        <Footer />
      </Container>
    </React.Fragment>
    )
}

export default Bookmarked