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 { ComponentSwitcher } from "@/components/ComponentSwitcher";
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="Surprisingly, all 106 individuals that participated in this class profile were in a co-op program! Most don't opt out of it because co-op can be one of the best experiences you can get from attending UW!"
      >
        <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 the GTA/Toronto or Waterloo region, then slowly progressed to the USA. Software jobs in California in particular are known for their prestige and high paying salary, which may explain why most students eventually try them out. However, due to the pandemic, the last 3 co-op placements were predominantly 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 in Toronto. Students really enjoyed their time working in California as a close second."
        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! This just goes to show that the software world is HUGE."
        align="center"
        noBackground
      >
        <ComponentSwitcher
          graphList={C7i.map((coopTerm, i) => (
            <WordCloud
              data={coopTerm}
              width={wordCloudWidth(isMobile, pageWidth)}
              height={DefaultProp.graphHeight}
              wordPadding={7}
              desktopMaxFontSize={75}
              mobileMaxFontSize={38}
              key={i}
            />
          ))}
          buttonList={C7i.map((_, i) => "Co-op #" + (i + 1).toString())}
        />
      </ComponentWrapper>

      {/* c4 */}
      <ComponentWrapper
        heading="In your opinion, what is the best company to work at?"
        bodyText="There’s a fair share of companies around here, with Google being the most popular vote. Jane Street ranks 2nd highest, followed by Meta/Facebook."
      >
        <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 placement. You’re not alone if you are here and can’t find one! Finding your first job can be especially difficult. Another possible reason for these results can be due to pandemic conditions."
        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="Reneging an offer can be a risky move, but it can still be beneficial when you believe that your other contract or salary can be better."
        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 seems that the effects have not spread too much. Most CS / CFM / CS/BBA students hold software-related jobs, which make for a relatively easy transition to a remote work 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 increased 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}
          valueAxisLeftMargin={75}
          margin={{
            top: 20,
            left: 20,
          }}
        />
      </ComponentWrapper>

      {/* C7v */}
      <ComponentWrapper
        heading="What was your co-op evaluation rating?"
        bodyText="Ratings were pretty positive overall, with “Outstanding” and “Excellent” making up the vast majority of evaluations! Respondents did not receive any ratings below “Very Good” in their 3rd, 4th, and 5th co-op terms."
      >
        <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="Co-op Term: "
          />
        </div>
      </ComponentWrapper>

      {/* C7vi */}
      <ComponentWrapper
        heading="How happy were you with your co-op during the work term specified?"
        bodyText="The ratio of people rating 4+ in happiness stayed roughly the same throughout the terms. There seems to be more 5s towards the last work term, likely due to students being more satisfied with better jobs that suit their interests."
        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="Co-op Term: "
            displayPercentage
          />
        </div>
      </ComponentWrapper>

      {/* C7vii */}
      <ComponentWrapper
        heading="How did you find your co-op?"
        bodyText="People found more co-ops externally and through return offers as the terms progressed, which makes sense as people gain more experience as they learn and grow. 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 co-op?"
        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 give you some great opportunities!"
        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="Co-op term: "
          />
        </div>
      </ComponentWrapper>

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