import {
  F1,
  F2,
  F3,
  F4,
  F5,
  F6,
  F7,
  F8,
  F9,
  F10,
  F11,
  F12,
  F13,
  F14,
  F15,
  F16,
} from "data/friends";
import { pageRoutes } from "data/routes";
import React from "react";
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 { SectionHeader } from "@/components/SectionHeader";
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 />
      <SectionHeader
        title="Friends"
        subtitle="The friends you make in university are friends you’ll have for life."
      />

      <ComponentWrapper
        heading="Rate how social you are."
        bodyText="Looks like most people consider themselves to be in the middle."
        align="center"
        noBackground
      >
        <BarGraphVertical
          data={F1}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How would you describe yourself?"
        bodyText="Ambiverts and introverts dominate CS at UWaterloo. Still, contrary to a popular Reddit opinion, it seems that introverted people do not necessarily comprise such a big majority of the CS student population. Extroverts and ambiverts are almost a half of the CS student population!"
        align="right"
      >
        <div className={styles.graphContainer}>
          <PieChart data={F2} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many close friends throughout university were also in your program?"
        bodyText="Most people had friends in the same program as them. For a lot of people, the majority of their friends are in the same program. Perhaps the shared classes, career goals, and pain from shared assignments make scheduling and conversations easier."
        noBackground
      >
        <BarGraphVertical data={F3} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How often do you keep in touch with high school friends?"
        bodyText="Most people are still in touch with their friends in some form or another! Keeping in touch with high school friends can be especially difficult, given that high school friends often drift away from each other due to different career and/or academic paths."
        align="right"
      >
        <div className={styles.graphContainer}>
          <PieChart data={F4} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many friends are going to be in the same city as you post-grad?"
        bodyText="It is nice to know that the majority of our respondents have a few friends that are going to be in their city post-grad."
        noBackground
      >
        <BarGraphVertical data={F5} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How often do you stay in touch with friends that you made during co-op?"
        bodyText="Many people do not really keep in touch with friends made during co-op. This makes sense as each co-op only lasts a short period of time. Interns are not necessarily given the opportunity to interact with each other during the co-op term either. A remote co-op experience can also affect friendships. To sum up, the ease of maintaining friends from co-ops varies on each co-op!"
        align="right"
      >
        <div className={styles.graphContainer}>
          <PieChart data={F6} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="How often do you stay in touch with friends that you made during school terms?"
        bodyText="Now, more people keep in touch with friends made during school terms. This could be because they can hang out during multiple school terms while on campus."
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={F7} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Which term(s) did you meet most of your friends?"
        bodyText="Establishing friendships is generally easier during the beginning of university as many core introductory courses are shared and all sequences have 1A and 1B at the same time. However, it is definitely still possible to make friends in later terms.😉"
        align="right"
      >
        <BarGraphHorizontal
          data={F8}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ left: 100 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many friend groups do you have?"
        bodyText="According to our data, most people have 3-4 friend groups. These friend groups can come from classes, extracurriculars, high school friends, etc."
        noBackground
      >
        <BarGraphVertical
          data={F9}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is the average size of your friend groups?"
        bodyText="UW's CS2022's friend groups typically consists of 3-4 people which is pretty normal. Groups of friends of this size allow people to do group activities while maintaining a sense of closeness between them."
        align="right"
      >
        <BarGraphVertical
          data={F10}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How open are you to meeting new people?"
        bodyText="Even though they are graduating, most of our respondents are still somewhat open to meeting new people. Meeting new people can make your life more exciting and make you discover new perspectives that change the way you approach life!"
        noBackground
      >
        <BarGraphVertical
          data={F11}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many of your friendships were made after starting university?"
        bodyText="For a lot of people, most or at least some friendships are made during university. This goes to show how university is an important point in life where people form their most valuable relationships!"
        align="right"
      >
        <BarGraphVertical
          data={F12}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How did you meet most of your friends after starting university?"
        bodyText="There are countless ways to meet new friends in university. Some of the most common ways include classes, mutual friends, and extracurriculars."
        noBackground
      >
        <BarGraphHorizontal
          data={F13}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ left: 150 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Where do you and your friends usually hang out on campus? "
        bodyText="There are many buildings on campus for students to chill and hang out. Looking at our data, hanging out at someone’s residence seems to be the most popular option. It makes sense as having fun outside of school buildings enable people to take their mind off from schoolwork. MC and DC are also fairly popular spots since they are where most classes take place for CS students and DC is the library where most students study at due to its nice vibes while MC has all the club offices."
        align="right"
      >
        <BarGraphVertical data={F14} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is your go-to activity when hanging out with friends?"
        bodyText="There is a variety of activities enjoyed by everyone! Most people enjoy eating food with their friends (Who doesn't love to eat or try out new restaurants?). Talking and going to the gym are the next social activities that are favoured the most by students. Hanging out with friends doesn't have to be complicated! 😉"
        noBackground
      >
        <WordCloud
          data={F15}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={7}
          desktopMaxFontSize={75}
          mobileMaxFontSize={48}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What proportion of friends will you keep in contact with post graduation?"
        bodyText="Some or even most friendships will be kept by our students post-grad! As mentioned previously, university is an experience where people make most of their long-term friends! This pie chart demonstrates it!"
        align="right"
      >
        <div className={styles.graphContainer}>
          <PieChart data={F16} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <BottomNav
        leftPage={pageRoutes.postGrad}
        rightPage={pageRoutes.miscellaneous}
      ></BottomNav>
    </div>
  );
}