export function Calendar(){
let arrows = Arrows(); 
    return(
        <>

    {arrows}
 

<ul className="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>
{Februar}
{March}
{April}
{May}
{June}
{July}
{August}
{September}
{October}
        </>
    )
}



function Arrows(){
    const months = ["February", "March", "April", "May", "June", "July", "August", "September", "October"]
    let arrows = [];
    for (let index = 0; index < months.length; index++) {
        if (index == 0) {
            console.log(`months[index] = ${months[index]}` )
            arrows.push(
                <div className="month hideable" id={`${months[index]}-head`} style={{display: "block"}}>      
                    <ul>
                    <span >
                        <li className="next">
                            <a onClick={switchTo(months[index+1])}><div>&#10095;</div></a>
                        </li>
                    </span>
                        <li>
                            {months[index]}
                            <br/>
                        <span style={{fontSize:"18px"}}>2024</span>
                        </li>
                    </ul>
                    </div>
            )
        }
        if (index == (months.length - 1)) {
            arrows.push(
                <div className="month hideable" id={`${months[index]}-head`} style={{display: "none"}}>      
                <ul>
                <span>
                    <li className="prev">
                        <a onClick={switchTo(months[index-1])}><div>&#10094;</div></a>
                    </li>
                </span>
                    <li>
                        {months[index]}
                        <br/>
                    <span style={{fontSize:"18px"}}>2024</span>
                    </li>
                </ul>
                </div>
            )
        }
        else{
            arrows.push(
                <div className="month hideable" id={`${months[index]}-head`}  style={{display: "none"}}>      
                <ul>
                <span >
                    <li className="prev">
                        <a onClick={switchTo(months[index-1])}><div>&#10094;</div></a>
                    </li>
                    <li className="next">
                        <a onClick={switchTo(months[index+1])}><div>&#10095;</div></a>
                    </li>
                </span>
                    <li>
                        {months[index]}
                        <br/>
                    <span style={{fontSize:"18px"}}>2024</span>
                    </li>
                </ul>
                </div>
            )
        }
    }
    return arrows; 
}

function switchTo(month: string){
    console.log(`Called Next Date with ${month}`)
    const nextdate = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
        console.log("nextDate open")
        let elementsToHide = document.getElementsByClassName("hideable"); 
        console.log(elementsToHide)
        for (let index = 0; index < elementsToHide.length; index++) {
           
            (elementsToHide[index] as HTMLElement).style.display = "none";  
        } 
        
        console.log("new month is: " + month + " and we are calling " +  `${month}-name`)
        if (document.getElementById(`${month}-dates`)) {
            console.info("document.getElementById(`${month}-dates`); exists")
            let newdates = document.getElementById(`${month}-dates`);
            (newdates as HTMLElement).style.display = "block";
        }
        else{
            console.error(`Element with id ${month}-dates does not exist`)
        }
        let newArrows = document.getElementById(`${month}-head`);
        (newArrows as HTMLElement).style.display = "block";
        console.log(newArrows)
      }
      return nextdate;  
}



const Februar = <ul id="February-dates" className="days hideable">  
<li></li>
<li></li>
<li></li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span className="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>

</ul>
const March = <ul id="March-dates" className="days hideable" style={{display: "none"}}>  
<li></li>
<li></li>
<li></li>
<li></li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span className="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>
const April = <ul id="April-dates" className="days hideable" style={{display: "none"}}>  
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span className="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
</ul>
const May = <ul id="May-dates" className="days hideable" style={{display: "none"}}>  
<li></li>
<li></li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span className="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>
const June = <ul id="June-dates" className="days hideable" style={{display: "none"}}>  
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span className="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
</ul>
const July = <ul id="July-dates" className="days hideable" style={{display: "none"}}>  
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span className="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>
const August = <ul id="August-dates" className="days hideable" style={{display: "none"}}>  
<li></li>
<li></li>
<li></li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span className="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>

const September = <ul id="September-dates" className="days hideable" style={{display: "none"}}>  
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span className="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
</ul>

const October = <ul id="October-dates" className="days hideable" style={{display: "none"}}>  
<li></li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span className="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>