import {
  I1,
  I2,
  I3,
  I4,
  I5,
  I6,
  I6i,
  I7,
  I8,
  I8i,
  I9,
  I10,
} from "data/intimacy-and-drugs";
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 { GroupedBarGraphVertical } from "@/components/GroupedBarGraph";
import { Header } from "@/components/Header";
import { PieChart } from "@/components/PieChart";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { SectionHeader } from "@/components/SectionHeader";

import { Color } from "../utils/Color";

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="Intimacy and Drugs"
        subtitle="What have people tried/already done during university?👀"
      />

      <ComponentWrapper
        heading="What level of intimacy have you reached?"
        bodyText="Undergrad is a time when we are surrounded by mostly people of our age and given more freedom to seek out relationships. This is reflected in our data by how many respondents first experienced different levels of intimacy during university. But, it is also worth noting that a large chunk of people did not respond for all of the intimacy levels, showing how they have not yet reached there or are uncomfortable sharing."
      >
        <GroupedBarGraphVertical
          className={styles.barGraphDemo}
          data={I1}
          barColors={[Color.primaryAccentLight, Color.secondaryAccentLight]}
          barHoverColorsMap={{
            [Color.primaryAccentLight]: Color.primaryAccent,
            [Color.secondaryAccentLight]: Color.secondaryAccent,
          }}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ bottom: 100 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Which drugs have you tried/used?"
        bodyText="A lot of students also experiment with substances during university. However, we can see that most students have not tried drugs that are more harsh than Marijuana, such as nicotine, cigarettes, or mushrooms."
        align="center"
        noBackground
      >
        <GroupedBarGraphVertical
          className={styles.barGraphDemo}
          data={I2}
          barColors={[Color.primaryAccentLight, Color.secondaryAccentLight]}
          barHoverColorsMap={{
            [Color.primaryAccentLight]: Color.primaryAccent,
            [Color.secondaryAccentLight]: Color.secondaryAccent,
          }}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ bottom: 60 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many committed relationships have you been in during university?"
        bodyText="Our respondents most commonly have been in either 0 or 1 committed relationship during their undergrad. On the other end, 5 is the most number of committed relationships indicated."
      >
        <BarGraphVertical data={I3} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many sexual partners have you had during university?"
        bodyText="Similar to the relationships question, most people responded with having 0 or 1 sexual partner during univeristy. However, one individual wrote 20, another wrote 50, and most impressively (or not depending on how you want to look at it) another wrote 120."
        align="left"
        noBackground
      >
        <BarGraphVertical data={I4} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Have you ever cheated on someone, been cheated on, or helped someone cheat?"
        bodyText="14 out of 96 people have selected yes to having been involved in cheating."
      >
        <div className={styles.graphContainer}>
          <PieChart data={I5} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Did you ever date another CS / CS/BBA / CFM student?"
        bodyText="27 people have dated another CS/CSBBA/CFM student. That’s about 1 in 4 students."
        align="right"
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={I6} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="If you answered no to the previous question, did you want to?"
        bodyText="Out of everyone who answered no to the last question, 28 people out of 70 did want to date someone in their program. That’s a little more than 1 in 4 students, meaning a little less than half of CS/CSBBA/CFA students did not want to date one another."
        align="right"
      >
        <div className={styles.graphContainer}>
          <PieChart data={I6i} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="If you've had a significant other, have you ever roomed together for a term?"
        bodyText="Out of people who have had a relationship, around half of them have roomed together and the other half have not."
        align="right"
        noBackground
      >
        <BarGraphVertical data={I7} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Are you currently in a relationship?"
        bodyText="A little less than half of our respondents are in a relationship as of the time they filled out this survey."
        align="left"
      >
        <BarGraphVertical data={I8} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="If you answered yes to the previous question, will you be living in the same city/region post-grad?"
        bodyText="For those who are currently in a relationship, 25 of them will be in the same city post-grad. The rest are will either be in a long-distance relationship or are currently unsure."
        align="right"
        noBackground
      >
        <BarGraphHorizontal
          data={I8i}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ left: 220 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper heading="How has your understanding of relationships changed in the past 5 years?">
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel
            data={I9}
            circleDiameter={0}
            width={barGraphWidth(isMobile, pageWidth)}
            height={400}
          />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Any advice for people looking for a relationship?"
        noBackground
      >
        <div className={styles.quotationCarouselContainer}>
          <QuotationCarousel
            data={I10}
            circleDiameter={0}
            width={barGraphWidth(isMobile, pageWidth)}
            height={400}
          />
        </div>
      </ComponentWrapper>

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