import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import React from "react";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";

import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";

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

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

export default function SamplePage() {
  const { width } = useWindowDimensions();
  const isMobile = useIsMobile();

  return (
    <div className={styles.page}>
      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
      >
        <BarGraphVertical
          data={mockCategoricalData}
          // For components that are in the side wrappers, it looks better if they fill a certain amount of width, so we can make the width dynamic like this
          width={isMobile ? width / 1.25 : width / 2}
          height={500}
          margin={{
            top: 20,
            bottom: 80,
            left: 60,
            right: 20,
          }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
        align="center"
      >
        <WordCloud
          data={moreMockCategoricalData.map((word) => ({
            text: word.key,
            value: word.value,
          }))}
          // For components that we don't want to match the width necessarily we can provide direct values
          width={isMobile ? width / 1.5 : 800}
          height={500}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
        align="right"
      >
        <BarGraphHorizontal
          className={styles.barGraphDemo}
          data={mockCategoricalData}
          width={isMobile ? width / 1.45 : width / 2}
          height={500}
          margin={{
            top: 20,
            bottom: 40,
            left: 150,
            right: 20,
          }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
        align="left"
        noBackground
      >
        <BarGraphHorizontal
          className={styles.barGrapDemo}
          data={mockCategoricalData}
          width={isMobile ? width / 1.45 : width / 2}
          height={500}
          margin={{
            top: 20,
            bottom: 40,
            left: 150,
            right: 20,
          }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
      >
        <BarGraphHorizontal
          className={styles.barGraphDemo}
          data={mockCategoricalData}
          width={isMobile ? width / 1.45 : width / 2}
          height={500}
          margin={{
            top: 20,
            bottom: 40,
            left: 150,
            right: 20,
          }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
        align="left"
        noBackground
      >
        <WordCloud
          data={moreMockCategoricalData.map((word) => ({
            text: word.key,
            value: word.value,
          }))}
          width={isMobile ? width / 1.5 : width / 2}
          height={500}
        />
      </ComponentWrapper>
      <BottomNav
        leftPageLink="/"
        leftPageName="Demographics"
        rightPageLink="/"
        rightPageName="Co-ops"
      ></BottomNav>
    </div>
  );
}