/*!

=========================================================
* Argon Dashboard Chakra PRO - v1.0.0
=========================================================

* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)

* Designed and Coded by Simmmple & Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/

// Chakra imports
import { Box, Grid, Text, useColorModeValue } from "@chakra-ui/react";
// Custom components
import Card from "components/Card/Card";
import CardBody from "components/Card/CardBody";
import CardHeader from "components/Card/CardHeader";
import BarChart from "components/Charts/BarChart";
import BubbleChart from "components/Charts/BubbleChart";
import DonutChart from "components/Charts/DonutChart";
import LineBarChart from "components/Charts/LineBarChart";
import LineChart from "components/Charts/LineChart";
import PieChart from "components/Charts/PieChart";
import PolarChart from "components/Charts/PolarChart";
import RadarChart from "components/Charts/RadarChart";
// Assets
import React from "react";
import {
  barChartDataCharts1,
  barChartDataCharts2,
  barChartOptionsCharts1,
  barChartOptionsCharts2,
  bubbleChartData,
  bubbleChartOptions,
  donutChartDataCharts1,
  donutChartOptionsCharts1,
  lineBarChartData,
  lineBarChartOptions,
  lineChartDataCharts1,
  lineChartDataCharts2,
  lineChartOptionsCharts1,
  lineChartOptionsCharts2,
  pieChartDataCharts1,
  pieChartOptionsCharts1,
  polarChartDataCharts,
  polarChartOptionsCharts,
  radarChartDataCharts,
  radarChartOptionsCharts,
} from "variables/charts";

function Charts() {
  const textColor = useColorModeValue("gray.700", "white");

  return (
    <Grid
      templateColumns={{ sm: "1fr", md: "repeat(2, 1fr)" }}
      templateRows={{ sm: "repeat(8, 1fr)", md: "repeat(4, 1fr)" }}
      gap="24px"
      pt={{ sm: "125px", lg: "75px" }}
    >
      <Card px="0px" pb="0px">
        <CardHeader mb="34px" px="22px">
          <Text color={textColor} fontSize="lg" fontWeight="bold">
            Line chart
          </Text>
        </CardHeader>
        <CardBody h="100%">
          <Box w="100%" h="100%">
            <LineChart
              chartData={lineChartDataCharts1}
              chartOptions={lineChartOptionsCharts1}
            />
          </Box>
        </CardBody>
      </Card>
      <Card px="0px" pb="0px">
        <CardHeader mb="34px" px="22px">
          <Text color={textColor} fontSize="lg" fontWeight="bold">
            Line chart with gradient
          </Text>
        </CardHeader>
        <CardBody h="100%">
          <Box w="100%" h="100%">
            <LineChart
              chartData={lineChartDataCharts2}
              chartOptions={lineChartOptionsCharts2}
            />
          </Box>
        </CardBody>
      </Card>
      <Card px="0px" pb="0px">
        <CardHeader mb="34px" px="22px">
          <Text color={textColor} fontSize="lg" fontWeight="bold">
            Bar chart
          </Text>
        </CardHeader>
        <CardBody h="100%">
          <Box w="100%" h="100%">
            <BarChart
              chartData={barChartDataCharts1}
              chartOptions={barChartOptionsCharts1}
            />
          </Box>
        </CardBody>
      </Card>
      <Card px="0px" pb="0px">
        <CardHeader mb="34px" px="22px">
          <Text color={textColor} fontSize="lg" fontWeight="bold">
            Bar chart horizontal
          </Text>
        </CardHeader>
        <CardBody h="100%">
          <Box w="100%" h="100%">
            <BarChart
              chartData={barChartDataCharts2}
              chartOptions={barChartOptionsCharts2}
            />
          </Box>
        </CardBody>
      </Card>
      <Card px="0px" pb="0px">
        <CardHeader mb="34px" px="22px">
          <Text color={textColor} fontSize="lg" fontWeight="bold">
            Mixed chart
          </Text>
        </CardHeader>
        <CardBody h="100%">
          <Box w="100%" h="100%">
            <LineBarChart
              chartData={lineBarChartData}
              chartOptions={lineBarChartOptions}
            />
          </Box>
        </CardBody>
      </Card>
      <Card px="0px" pb="0px">
        <CardHeader mb="34px" px="22px">
          <Text color={textColor} fontSize="lg" fontWeight="bold">
            Bubble chart
          </Text>
        </CardHeader>
        <CardBody h="100%">
          <Box w="100%" h="100%">
            <BubbleChart
              chartData={bubbleChartData}
              chartOptions={bubbleChartOptions}
            />
          </Box>
        </CardBody>
      </Card>
      <Card px="0px" pb="0px">
        <CardHeader mb="34px" px="22px">
          <Text color={textColor} fontSize="lg" fontWeight="bold">
            Donut chart
          </Text>
        </CardHeader>
        <CardBody h="100%">
          <Box w="100%" minH={{ sm: "200px", lg: "300px" }}>
            <DonutChart
              chartData={donutChartDataCharts1}
              chartOptions={donutChartOptionsCharts1}
            />
          </Box>
        </CardBody>
      </Card>
      <Card px="0px" pb="0px">
        <CardHeader mb="34px" px="22px">
          <Text color={textColor} fontSize="lg" fontWeight="bold">
            Pie chart
          </Text>
        </CardHeader>
        <CardBody h="100%">
          <Box w="100%" minH={{ sm: "200px", lg: "300px" }}>
            <PieChart
              chartData={pieChartDataCharts1}
              chartOptions={pieChartOptionsCharts1}
            />
          </Box>
        </CardBody>
      </Card>
      <Card px="0px" pb="0px">
        <CardHeader mb="34px" px="22px">
          <Text color={textColor} fontSize="lg" fontWeight="bold">
            Radar chart
          </Text>
        </CardHeader>
        <CardBody h="100%">
          <Box w="100%" minH={{ sm: "300px", lg: "500px" }}>
            <RadarChart
              chartData={radarChartDataCharts}
              chartOptions={radarChartOptionsCharts}
            />
          </Box>
        </CardBody>
      </Card>
      <Card px="0px" pb="0px">
        <CardHeader mb="34px" px="22px">
          <Text color={textColor} fontSize="lg" fontWeight="bold">
            Polar chart
          </Text>
        </CardHeader>
        <CardBody h="100%">
          <Box w="100%" minH={{ sm: "300px", lg: "500px" }}>
            <PolarChart
              chartData={polarChartDataCharts}
              chartOptions={polarChartOptionsCharts}
            />
          </Box>
        </CardBody>
      </Card>
    </Grid>
  );
}

export default Charts;