import {
  C1,
  C2,
  C3,
  C4,
  C5,
  C6,
  C7i,
  C7ii,
  C7iii,
  C7iv,
  C7v,
  C7vKey,
  C7vi,
  C7viKey,
  C7vii,
  C7viii,
  C7viiiKey,
} from "data/coop";
import { pageRoutes } from "data/routes";
import React from "react";
import { Color } from "utils/Color";
import {
  barGraphMargin,
  DefaultProp,
  pieChartProps,
  wordCloudWidth,
} from "utils/defaultProps";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";

import { BottomNav } from "@/components/BottomNav";
import { BoxPlot } from "@/components/Boxplot";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { LineGraph } from "@/components/LineGraph";
import { PieChart } from "@/components/PieChart";
import { SectionHeader } from "@/components/SectionHeader";
import {
  StackedBarGraphHorizontal,
  StackedBarGraphVertical,
} from "@/components/StackedBarGraph";
import { Title } from "@/components/Title";

import { WordCloud } from "../components/WordCloud";

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

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

  const colorRange = [
    Color.primaryAccent,
    Color.secondaryAccentLight,
    Color.primaryAccentLight,
    Color.secondaryAccent,
  ];

  return (
    <div className={styles.page}>
      <Header />
      <Title>Co-op</Title>
      <SectionHeader
        title="Co-op"
        subtitle="Explore careers, gain experience and earn money through UWaterloo's co-op program!"
      />
      {/* C1 */}
      <ComponentWrapper
        heading="Are you in a co-op program?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Surprisingly, all individuals that participated were in a co-op program! Being part of the co-op program is the default option when applying to CS/CFM/CSBBA. Most don't opt out of it because co-op is one of the best experience you can get from attending the University of Waterloo!"
      >
        <div className={styles.graphContainer}>
          <PieChart data={C1} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      {/* C7ii */}
      <ComponentWrapper
        heading="Where were you located during work?"
        bodyText="Many students started in GTA or Waterloo region, then slowly progressed to California / USA. Software jobs in California / USA are known for their prestige and their high paying salary which may explain why most students eventually try them out. However, due to the pandemic, the last 3 co-op placements locations were dominantly remote."
        align="right"
        noBackground
      >
        <LineGraph
          data={C7ii}
          width={isMobile ? pageWidth / 1.5 : 600}
          height={DefaultProp.graphHeight}
          margin={{
            top: 20,
            bottom: 80,
            left: 30,
            right: 20,
          }}
          colorRange={colorRange}
        />
      </ComponentWrapper>

      {/* C2 */}
      <ComponentWrapper
        heading="What was your favourite co-op location?"
        bodyText="32% of students enjoyed their co-op terms working in Toronto. A close second was students really enjoying their time working in California."
        align="right"
      >
        <WordCloud
          data={C2}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight * 0.7}
          wordPadding={15}
          desktopMaxFontSize={75}
          mobileMaxFontSize={48}
        />
      </ComponentWrapper>

      {/* C7i */}
      <ComponentWrapper
        heading="What company did you work for?"
        bodyText="There are lots of companies that people have worked at! It just goes to show that the software world is HUGE. Most people have worked at Google, Meta, Jane Street, and HRT!"
        align="center"
        noBackground
      >
        <WordCloud
          data={C7i}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={7}
          desktopMaxFontSize={75}
          mobileMaxFontSize={38}
        />
      </ComponentWrapper>

      {/* c4 */}
      <ComponentWrapper
        heading="In your opinion, what is the best company to work at?"
        bodyText="We’ve got a fair share of companies around here, with Google being dominant as the best. Jane Street ranks 2nd highest. These results seem to be correlating with the most popular companies that students have worked at!"
      >
        <WordCloud
          data={C4}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={14}
          desktopMaxFontSize={75}
          mobileMaxFontSize={48}
        />
      </ComponentWrapper>

      {/* c3 */}
      <ComponentWrapper
        heading="Have you ever had a co-op term without a placement?"
        bodyText="A sixth of respondents have gone through a term without a co-op. You’re not alone if you here and can’t find one! Finding your first co-op can be especially difficult."
        align="right"
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={C3} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      {/* c5 */}
      <ComponentWrapper
        heading="Were you ever banned from WaterlooWorks for renegotiating an offer/match?"
        bodyText="Re-negotiating an offer or a match can be a risky move, especially since students are not supposed to directly contact the employers. Re-negotiating can still be beneficial when you believe that your contract or salary can be better. A lot of people also get banned from WaterlooWork by accepting an external offer while getting matched with another company on WaterlooWorks. Make sure to fill out the 'Arrange your own job' form to avoid this!"
        align="right"
      >
        <div className={styles.graphContainer}>
          <PieChart data={C5} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      {/* c6 */}
      <ComponentWrapper
        heading="How many co-op positions did you lose due to COVID-19, if any?"
        bodyText="Most people probably lost a position immediately when the pandemic began (Winter 2020), but it’s good to see the effects have not trickled too much. Most CS/CFM/CSBBA students do software-related jobs which are easier to transition into a remote environment."
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={C6} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      {/* C7iii */}
      <ComponentWrapper
        heading="What was your salary per hour in CAD (excluding other forms of compensation)?"
        bodyText="Compensation generally went up throughout the terms! For reference, in 2021, the average co-op salaries in the Faculty of Mathematics in Canada were $20.15, $22.05, $24.98, $27.60, $28.96, and $30.95 CAD, respectively. The same amounts in the USA were $28.08, $30.82, $33.65, $34.50, $37.15, and $37.60 USD, respectively. So, CS students tend to get paid more than the faculty average."
        align="right"
      >
        <BoxPlot
          width={isMobile ? pageWidth / 1.5 : 500}
          height={DefaultProp.graphHeight}
          data={C7iii}
          margin={{
            top: 20,
            left: 20,
          }}
        />
      </ComponentWrapper>

      {/* C7iv */}
      <ComponentWrapper
        heading="How much did you receive in other forms of compensation in CAD? (i.e. bonuses, stock options, relocation, housing, etc.)"
        bodyText="Additional compensation had increased as terms progressed and students got better jobs. It’s great to see students having accommodations to make their lives easier. We can also note that most participants didn't get any other form of compensation which explains why the first quartile and the minimum is at 0 for all terms."
        noBackground
      >
        <BoxPlot
          width={isMobile ? pageWidth / 1.5 : 600}
          height={DefaultProp.graphHeight}
          data={C7iv}
          valueAxisLeftOffset={75}
          margin={{
            top: 20,
            left: 20,
          }}
        />
      </ComponentWrapper>

      {/* C7v */}
      <ComponentWrapper
        heading="What was your coop evaluation rating?"
        bodyText="Ratings were pretty positive overall! It seems that it's not extremely hard to get an outstanding rating! The y-axis represents the co-op term while the x-axis represents the number of students who have given a rating."
      >
        <div>
          <StackedBarGraphHorizontal
            width={isMobile ? pageWidth / 1.5 : 600}
            height={DefaultProp.graphHeight}
            keys={C7vKey}
            colorRange={[
              Color.primaryAccent,
              Color.secondaryAccentLight,
              Color.primaryAccentLighter,
              Color.secondaryAccent,
            ]}
            data={C7v}
            margin={barGraphMargin}
            displayPercentage
            tooltipBottomLabel="Coop Term: "
          />
        </div>
      </ComponentWrapper>

      {/* C7vi */}
      <ComponentWrapper
        heading="How happy were you with your coop during the work term specified?"
        bodyText="The ratio of people rating 4+ in happiness stayed roughly the same throughout the terms. There seem to be more 5s towards the last work term as students usually get better jobs that suit their interests and are thus, more satisfied."
        align="right"
        noBackground
      >
        <div>
          <StackedBarGraphVertical
            width={isMobile ? pageWidth / 1.5 : 600}
            height={DefaultProp.graphHeight}
            keys={C7viKey}
            colorRange={[
              Color.primaryAccent,
              Color.secondaryAccentLight,
              Color.primaryAccentLighter,
              Color.secondaryAccent,
              Color.primaryHeading,
            ]}
            data={C7vi}
            margin={barGraphMargin}
            tooltipBottomLabel="Coop Term: "
            displayPercentage
          />
        </div>
      </ComponentWrapper>

      {/* C7vii */}
      <ComponentWrapper
        heading="How did you find your job?"
        bodyText="People found more co-ops externally and got more return offers as terms progressed, which makes sense as people gain more experience, become more selective of their co-op positions, and become closer to their graduation date. Companies also generally love to re-hire their interns! WaterlooWorks was still really good in helping people find jobs in the main and continuous rounds."
        align="right"
      >
        <div style={{ padding: "10px" }}>
          <LineGraph
            data={C7vii}
            colorRange={colorRange}
            width={isMobile ? pageWidth / 1.5 : 600}
            height={DefaultProp.graphHeight}
            margin={{
              top: 20,
              bottom: 80,
              left: 30,
              right: 20,
            }}
          />
        </div>
      </ComponentWrapper>

      {/* C7viii */}
      <ComponentWrapper
        heading="Were you referred for the job?"
        bodyText="Interestingly, the referral to non-referral ratio stayed roughly the same as the co-op terms progressed, apart from the first one which had the most referrals. This goes to show that, without a doubt, networking can really get you some great opportunities! Especially in your first co-ops when your experience may be lacking!"
        noBackground
      >
        <div>
          <StackedBarGraphVertical
            width={isMobile ? pageWidth / 1.5 : 600}
            height={DefaultProp.graphHeight}
            keys={C7viiiKey}
            colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
            data={C7viii}
            margin={barGraphMargin}
            displayPercentage={true}
            tooltipBottomLabel="Coop term: "
          />
        </div>
      </ComponentWrapper>

      <BottomNav
        leftPage={pageRoutes.academics}
        rightPage={pageRoutes.lifestyleAndInterests}
      />
    </div>
  );
}
