import {
  A1,
  A2,
  A3,
  A4,
  A5,
  A6,
  A7,
  A8,
  A9,
  A10,
  A11,
  A12,
  A12i,
  A12iKeys,
  A13,
  A13i,
  A13ii,
  A13iii,
  A14,
  A15,
  A16,
  A16Keys,
  A18,
  A18i,
  A18ii,
  A19,
  A19i,
  A20,
  A21,
  A21i,
  A21ii,
  A21iii,
  A21iv,
  A21v,
} from "data/academics";
import { pageRoutes } from "data/routes";
import React from "react";
import { Color } from "utils/Color";
import {
  barGraphProps,
  DefaultProp,
  pieChartProps,
  barGraphMargin,
  barGraphWidth,
  wordCloudWidth,
} from "utils/defaultProps";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";

import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { PieChart } from "@/components/PieChart";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { SectionHeader } from "@/components/SectionHeader";
import { SectionWrapper } from "@/components/SectionWrapper";
import {
  StackedBarGraphHorizontal,
  StackedBarGraphVertical,
} from "@/components/StackedBarGraph";
import { WordCloud } from "@/components/WordCloud";

import styles from "./samplePage.module.css";

export default function Academics() {
  const pageWidth = useWindowDimensions().width;
  const isMobile = useIsMobile();

  return (
    <div className={styles.page}>
      <Header />
      <SectionHeader title="Academics" />

      <SectionWrapper title="Programming" />

      <ComponentWrapper
        heading="How many years of coding experience did you have prior to 1A?"
        bodyText="Almost 70% of the students that participated had minimal to no coding experience (0 - 2 years), prior to coming into Waterloo. Goes to show that years of programming knowledge is not required to be admitted in CS/CFM/CSBBA at Waterloo."
      >
        <div className={styles.graphContainer}>
          <PieChart data={A1} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Is your expected graduation date the same as when you enrolled in the program?"
        bodyText="Most people stayed on track with their original plans, but it’s not unheard of students delaying their graduation date either due to re-taking failed classes, gap terms, completing minors, etc. It's normal to take time completing your degree! :)"
        align="right"
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={A2} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is your favourite text editor or IDE?"
        bodyText="The class favours VS Code, a versatile, lightweight, and customizable IDE. This is no surprise as VS Code is known to be a sweet spot between Vim and more complex IDEs like IntelliJ: It's fast, lightweight, easy to use, powerful with its extensions, offers a plethora of themes, etc."
        align="right"
      >
        <BarGraphHorizontal
          data={A3}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ left: 180 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is your favourite programming language?"
        bodyText="The favourite programming language award for the class of 2022 goes to ….PYTHON! No surprise here, it reads the most like English. C++ is a very notable language as a part of the CS program; thus, it’s no surprise it comes in second. Once again, its sad to see that the graduating class of 2022 has losts its passion in being fellow Racket enjoyers. Hopefully, post grads are able to rekindle their love for using Racket."
        align="center"
        noBackground
      >
        <BarGraphHorizontal data={A4} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many coding languages do you know?"
        bodyText="85%+ of individuals that participated in the survey know 4 or more languages. It's evident that, as students take more internships and classes, they learn more programming languages, especially in a field that is continuously evolving!"
      >
        <BarGraphVertical data={A5} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What operating system(s) do you mainly use?"
        bodyText="Almost a third of people use macOS exclusively! It is pretty popular among university students in most other programs, but also it’s interesting to see how even sometimes with the plethora of compatibility issues with macOS, so many CS students will still use it."
        align="right"
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={A6} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <SectionWrapper title="Electives, Subject, School" />

      <ComponentWrapper
        heading="What category of electives for your degree did you enjoy most?"
        bodyText="Seems like the class really enjoyed both their Social Science and Humanities courses with almost half of the class choosing both categories as their most enjoyed. For context, CS students are required to complete a number of electives from certain categories to graduate."
      >
        <BarGraphHorizontal
          data={A7}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ left: 180 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Which non-math elective was your favourite?"
        bodyText="Lots of amazing non-math electives mentioned in the list, with MUSIC140 being a crowd favourite. We can also note that MUSIC, PHIL, and PSYCH courses are well liked!"
        align="center"
        noBackground
      >
        <WordCloud
          data={A8}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={7}
          desktopMaxFontSize={75}
          mobileMaxFontSize={30}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Which CS course was your favourite?"
        bodyText="CS246 is the most popular CS course for the class of 2022. This course introduces Object-Oriented Programming, a fundamental programming paradigm that is used in many places. No wonder this course is so well liked! Next up, we have CS343 and CS486 both tying up in 2nd place. CS343 teaches concurrent parallel programming while CS486 delves into the realm of Artificial Intelligence. Both are very interesting courses, exploring different niche aspects of Computer Science!"
        align="right"
      >
        <WordCloud
          data={A9}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={8}
          desktopMaxFontSize={60}
          desktopMinFontSize={15}
          mobileMaxFontSize={60}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Which CS course was your least favourite?"
        bodyText="CS245, Logic and Computation, was the least favourite CS course students took. It can probably be explained by its difficulty, the theoretical focus of the course, the content being less applicable outside of class plus it being a core CS course. Honourable mention to CS348 (Intro to DB management), which, according to UWFlow, is a 'horribly' organized course with outdated content (RIP)."
        noBackground
      >
        <WordCloud
          data={A10}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={11}
          desktopMaxFontSize={80}
          mobileMaxFontSize={70}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Which course did you find the most useful for job preparation?"
        bodyText="CS341 (Algorithms) was deemed the most useful CS core course for job preparation according to respondents. This is a no-brainer as Leetcode practice is crucial for passing the interview process! :) Meanwhile, CS246 (Object-Oriented Software Development) is rated 2nd. This can be correlated with students ranking it first as the most favourite CS class!"
      >
        <WordCloud
          data={A11}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={20}
          desktopMaxFontSize={80}
          mobileMaxFontSize={80}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Did you take any advanced/enriched courses?"
        bodyText="45% of the class has taken at least 1 enriched course before their graduation. Damn, that's almost half of our participants!"
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={A12} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Who is your favourite professor in all of UW?"
        bodyText="Class of 2022 would like to give a shout out to Alice Gao, Carmen Bruni, and Lesley Istead as best professors in UW! Go read their ratings on UWFlow! ;) We would also like to give an honourable mention to every profs and TAs part of the Math faculty who have poured their passion in teaching to help the CS class of 2022 grow and succeed! You guys are amazing! ❤️"
        align="right"
      >
        <WordCloud
          data={A14}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={3}
          desktopMaxFontSize={75}
          mobileMaxFontSize={48}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="If you took any advanced or enriched courses, for each course please indicated how much you enjoyed it?"
        bodyText="Advanced/Enriched CS courses are rated pretty high, but generally, it seems like the ones taken earlier tend to have better ratings. 🤔"
        align="center"
        noBackground
      >
        <StackedBarGraphHorizontal
          width={isMobile ? pageWidth / 1.5 : 600}
          height={DefaultProp.graphHeight}
          keys={A12iKeys}
          colorRange={[
            Color.primaryAccent,
            Color.secondaryAccentLight,
            Color.primaryAccentLighter,
          ]}
          data={A12i}
          axisLeftOffset={80}
          margin={{
            top: 20,
            left: 20,
          }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Which study term did you think was the hardest?"
        bodyText="2nd year seems to be the hardest year for most CS students with a whooping 52% of respondants agreeing on this (Prepare to be slapped in 2A). 2B has the second highest vote count which validates the saying, “Two B or not Two B”. The later terms are almost relaxing..."
      >
        <BarGraphVertical data={A15} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What were your averages for each term? Approximately, what is your cumulative average as of right now?"
        bodyText="The majority of people did their best in 1A and their worst in 1B, 2A, or 2B, likely because most of the mandatory challenging CS+MATH courses lie around that period of time. Students started having better grades in 3A, correlating with the difficulty of the courses question seen previously."
        align="center"
        noBackground
      >
        <StackedBarGraphVertical
          width={600}
          height={400}
          keys={A16Keys}
          colorRange={[
            Color.primaryAccent,
            Color.secondaryAccentLight,
            Color.primaryAccentLighter,
          ]}
          data={A16}
          margin={{
            top: 20,
            left: 20,
          }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many classes have you failed?"
        bodyText="Most people tend to get by their degree without failing a course, but clearly it’s not over if you have failed some. :)"
        align="right"
      >
        <BarGraphVertical data={A20} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Did you complete an option, specialization or minor?"
        bodyText="50% of the students have completed some form of option, specialization, or minor during their  undergrad. These three are ways you can add qualifications to your degree using the electives that you have. That's what they mean when they say you can customize your CS degree! 😛"
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={A18} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Which option(s), specialization(s) or minor(s) did you complete?"
        bodyText="The most common ones are Combinatorics & Optimization (C&O), Business, and Pure Mathematics. However, many people have combined specializations, making their degree very customized and tailored towards their specific interests."
      >
        <WordCloud
          data={A18i}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={7}
          desktopMaxFontSize={60}
          desktopMinFontSize={15}
          mobileMaxFontSize={30}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What made you want to complete the option, specialization or minor?"
        align="center"
        noBackground
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={A18ii} circleDiameter={0} height={300} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Have you overloaded any of your semesters?"
        align="right"
      >
        <div className={styles.graphContainer}>
          <PieChart data={A19} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many overloaded semesters did you take?"
        bodyText="Waterloo academic terms can already be pretty charged; however, over 75% of participants were able to overload at least 1 or more term. 32.7% of students overloaded 3+ terms. 🤯"
        noBackground
      >
        <BarGraphVertical data={A19i} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Did you transfer into your current program?"
        bodyText="23% of respondants transferred into their current program which is a surprisingly high number. CS is a pretty flexible degree though, so transferring your credits shouldn't be too hard! ;)"
      >
        <div className={styles.graphContainer}>
          <PieChart data={A13} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <SectionWrapper title="Transfer" />
      <ComponentWrapper
        heading="What program did you transfer from?"
        bodyText="Most transfers came from MATH and CFM. One can note that people who didn't get CS as their first choice most likely got deferred into MATH. CFM transfers may be due to students not ending up liking the financial aspect of their original program."
        noBackground
      >
        <BarGraphVertical data={A13i} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What term did you transfer into your program?"
        bodyText="Most of the transfers occurred during 2A and 2B terms, which makes sense since people have time to re-evaluate their academic/career path after spending a year in their original program."
        align="right"
      >
        <BarGraphVertical
          data={A13ii}
          {...barGraphProps(isMobile, pageWidth)}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What was your reasoning behind transferring?"
        bodyText="Having a flexible schedule is one of the most important reasons that people transfer into CS/CSBBA. Many respondants also justified their transfer due to not being in the program of their choice or realizing their interest for CS later."
        noBackground
      >
        <BarGraphVertical
          data={A13iii}
          widthAlternatingLabel={1000}
          alternatingLabelSpace={200}
          lowerLabelDy="60px"
          {...barGraphProps(isMobile, pageWidth)}
        />
      </ComponentWrapper>

      <SectionWrapper title="Exchange" />

      <ComponentWrapper
        heading="Did you take any exchange terms?"
        bodyText="Students can apply to the exchange program starting in their 2nd year to experience studying abroad for a study term! Exchange does not necessarily imply changing school with another student. Not many students took exchange terms from this sample."
      >
        <div className={styles.graphContainer}>
          <PieChart data={A21} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="What term did you take an exchange in?"
        bodyText="Only 7% of students decided to take an exchange term during their undergrad with most students going during their 3A and 4B terms. Interestingly, 21% of students were interested in going on an exchange term, but were unable to go due to Covid."
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={A21i} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Where did you take your exchange term?"
        bodyText="Only three people declared exactly where their exchange term was."
        align="right"
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={A21ii} circleDiameter={0} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Were you unable to complete an exchange term an exchange term due to COVID-19?"
        bodyText="Pretty unfortunate that a lot more people would have gone on exchange if it wasn’t for the pandemic. :("
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={A21iii} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper heading="What was the hardest thing about going on exchange?">
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={A21iv} circleDiameter={0} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is your favourite memory from your time during the exchange?"
        bodyText="Hopefully more students in future classes have the opportunity to have cool experiences like these as well. :)"
        noBackground
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel data={A21v} circleDiameter={0} />
        </div>
      </ComponentWrapper>

      <BottomNav
        leftPage={pageRoutes.demographics}
        rightPage={pageRoutes.coop}
      ></BottomNav>
    </div>
  );
}