import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import {
  mockCategoricalData,
  moreMockCategoricalData,
  mockStackedBarKeys,
  mockStackedBarGraphData,
  mockQuoteDataLong,
  mockQuoteData,
} from "data/mocks";
import React from "react";
import { Color } from "utils/Color";

import { QuotationCarousel } from "@/components/QuotationCarousel";
import { StackedBarGraph } from "@/components/StackedBarGraph";

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

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

export default function Home() {
  return (
    <div className={styles.page} suppressHydrationWarning>
      <h1>Playground</h1>
      <p>Show off your components here!</p>
      <ColorPalette />

      <h2>
        <code>{"<BarGraphHorizontal />"}</code>
      </h2>
      <BarGraphHorizontal
        className={styles.barGraphDemo}
        data={mockCategoricalData}
        width={800}
        height={500}
        margin={{
          top: 25,
          bottom: 40,
          left: 150,
          right: 20,
        }}
      />

      <h2>
        <code>{"<BarGraphVertical />"}</code>
      </h2>
      <p>
        <code>{"<BarGraphVertical />"}</code> takes the same props as{" "}
        <code>{"<BarGraphHorizontal />"}</code>.
      </p>
      <BarGraphVertical
        className={styles.barGraphDemo}
        data={mockCategoricalData}
        width={800}
        height={500}
        margin={{
          top: 20,
          bottom: 80,
          left: 60,
          right: 20,
        }}
      />

      <h2>
        <code>{"<WordCloud />"}</code>
      </h2>
      <WordCloud
        data={moreMockCategoricalData.map((word) => ({
          text: word.key,
          value: word.value,
        }))}
      />

      <h2>
        <code>{"<StackedBarGraph />"}</code>
      </h2>
      <StackedBarGraph
        width={600}
        height={400}
        keys={mockStackedBarKeys}
        colorRange={[
          Color.primaryAccent,
          Color.secondaryAccentLight,
          Color.primaryAccentLighter,
        ]}
        data={mockStackedBarGraphData}
        margin={{
          top: 20,
          left: 20,
        }}
      />
      <h2>
        <code>{"<QuotationCarousel />"}</code>
      </h2>
      <div className={styles.quotationCarouselDemo}>
        <QuotationCarousel data={mockQuoteData} circleDiameter={0} />
        <QuotationCarousel
          data={mockQuoteDataLong}
          width={800}
          height={160}
          circleDiameter={180}
        />
      </div>
    </div>
  );
}