import {
  L1,
  L2,
  L3,
  L4,
  L5,
  L6,
  L7,
  L8,
  L9,
  L10,
  L11,
  L12,
  L13,
  L14,
  L16,
  L17,
  L18,
  L19,
} from "data/lifestyle-and-interests";
import { pageRoutes } from "data/routes";
import React from "react";
import {
  barGraphProps,
  DefaultProp,
  pieChartProps,
  barGraphMargin,
  barGraphWidth,
} 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 { SectionHeader } from "@/components/SectionHeader";
import { Title } from "@/components/Title";
import { WordCloud } from "@/components/WordCloud";

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

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

  return (
    <div className={styles.page}>
      <Header />
      <Title>Lifestyle and Interests</Title>
      <SectionHeader
        title="Lifestyle and Interests"
        subtitle="What do CS people do in their free time?"
      />

      <ComponentWrapper
        heading="Did you move back home during the beginning of COVID-19?"
        bodyText="The vast majority of respondents did move back home during the beginning of Covid, which makes sense given the situation. "
      >
        <div className={styles.graphContainer}>
          <PieChart data={L1} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Have many doses of COVID-19 vaccination have you gotten?"
        bodyText="Complete proof of vaccination used to be a requirement for entering campus, unless there are special circumstances. Here, we can see that everyone except for 2 people had 2 or more doses. The large majority had 3+ doses."
        align="right"
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={L2} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="How did your outlook on religion change during university?"
        bodyText="Interestingly, most of our respondents were never religious."
      >
        <BarGraphVertical
          data={L3}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Did you learn how to cook during university?"
        bodyText="Only 12 people indicated that they have not learned to cook. As for the rest, more stated that they learned to cook during university rather than before. This could correlate to university being the first time that many students move out from their parent/gardian’s place."
        align="right"
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={L4} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many days are you physically active in a week now?"
        bodyText="It’s nice to see that most Waterloo student are active at least a few days a week! CS is an especially sedentary major so it’s important to stay active and take care of your bodies."
      >
        <BarGraphVertical
          data={L5}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How often did you pull all-nighters throughout university?"
        bodyText="84 people have either never pulled an all-nighter or only once every few months. With decent time management skills, work is definitely manageable and sleep does not have to be sacrificed."
        noBackground
      >
        <BarGraphVertical data={L6} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading='Rate how strongly you agree with the following statement: "Throughout my university experience, I felt like I had enough time to pursue my own hobbies."'
        bodyText="However, it seems like many people did not find enough time for their hobbies. Workloads can often pile up."
        align="right"
      >
        <BarGraphVertical data={L7} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How often did you attend parties/gatherings?"
        bodyText="A lot of students attend social events to relieve some stress and build relationships. Many Waterloo students our no exception. Although we are not know for our parties, they can still frequently be found in residence areas around campus."
        align="left"
        noBackground
      >
        <BarGraphHorizontal
          data={L8}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ left: 200 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What time do you usually sleep?"
        bodyText="Looks like we have a lot of nightowls!"
        align="right"
      >
        <BarGraphVertical data={L9} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many hours of sleep do you get on average per night?"
        bodyText="Although many of our respondents sleep late, most people are getting 7+ hours every night. Our class schedules are typically somewhat flexible and morning classes are usually not super popular amoung students."
        align="left"
        noBackground
      >
        <BarGraphVertical data={L10} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="While on campus, how many days out of the week do you go out to eat at a restaurant?"
        bodyText="Waterloo’s campus is surrounded by great food places. We have a plaza filled with restaurants that serve all sorts of food such as Mexican, East Asian, Persian, Indian, etc. Although most students have learned to cook, we still enjoy eating out ever so often."
        align="right"
      >
        <BarGraphVertical
          data={L11}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is your favourite restaurant to go to on/around campus?"
        bodyText="With all the diverse restaurant around campus, it seems like the most popular choices of food are sushi, noodles, and shawarma (Lazeez hehehe)."
        noBackground
      >
        <WordCloud
          data={L12}
          width={isMobile ? pageWidth / 1.5 : 800}
          height={DefaultProp.graphHeight}
          wordPadding={7}
          desktopMaxFontSize={75}
          mobileMaxFontSize={48}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is your Leetcode proficiency level?"
        bodyText="Most respondents can consistently solve medium leetcode questions, which are often asked by large tech companies during interviews. Some people also responded with being able to solve hard level questions on leetcode, going above and beyond."
        align="right"
      >
        <BarGraphHorizontal
          data={L13}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ left: 270 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many side projects have you completed during university, if any?"
        bodyText="Students invest time into side projects to show companies their software experiences and skills. Building side projects is a great way to compensate for lack of actual work experience. Many of our respondents are shown to have completed a few side projects, however, a large amount of them have indicated that they have not down any at all. This shows that side projects are not the only factor to landing a job."
        noBackground
      >
        <BarGraphVertical
          data={L14}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How often do you attend hackathons now?"
        bodyText="Similar to side projects, hackathons allow students to show companies their software skills and passion in technology. Many creative projects stem from hackathons as well. But, hackathons are definitely not a necessity. In fact, we see that the vast majority of our respondents have never or very rarely attended hackathons."
        align="right"
      >
        <div className={styles.graphContainer}>
          <PieChart data={L16} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Which extracurricular activities (e.g., design teams, sports, intramurals, clubs, societies) did you participate in? "
        bodyText="Many of our respondents are involved with one or more extracurricular activities during university. These include sports, clubs, societies, and more."
        noBackground
      >
        <WordCloud
          data={L17}
          width={isMobile ? pageWidth / 1.5 : 800}
          height={DefaultProp.graphHeight}
          wordPadding={7}
          desktopMaxFontSize={75}
          mobileMaxFontSize={48}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Where is your favourite place to study on campus?"
        bodyText="The most popular study locations according to our respondents are the Mathematics & Computer Building (MC) and the William G. Davis Computer Research Centre (DC), each having 23 and 22 votes respectively. Other popular places include on residence, QNC, and E7."
        align="right"
      >
        <BarGraphHorizontal
          data={L18}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ left: 50 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Have you done a URA (Undergraduate Research Assistantship)?"
        bodyText="URA provide students with the opportunity to gain research experience, usually with a professor, while earning some money."
        noBackground
      >
        <PieChart data={L19} {...pieChartProps(isMobile, pageWidth)} />
      </ComponentWrapper>

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