"use client";

import {
  Area,
  AreaChart,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import React, { useState } from "react";

import styles from "@/components/administrator/ViewsChart/viewchart.module.css";
import Dropdown from "../form/Dropdown/dropdown";

const ViewsChart = ({ initialData }) => {
  const [data, setData] = useState(initialData);

  return (
    <>
      <div
        style={{ height: "450px", width: "100%" }}
        className={styles.container}>
        <div className={styles.header_container}>
          <div className={styles.header_title}>
            <p>
              <span>Visitor</span>
            </p>
            <p>Unique visitor count and total visitor count of page views</p>
            <p></p>
          </div>
          <div className={styles.header_action}></div>
        </div>
        <ResponsiveContainer
          width="100%"
          height="100%">
          <AreaChart
            width={730}
            height={250}
            data={data}
            margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
            <defs>
              <linearGradient
                id="colorUv"
                x1="0"
                y1="0"
                x2="0"
                y2="1">
                <stop
                  offset="5%"
                  stopColor="#4085b3"
                  stopOpacity={0.8}
                />
                <stop
                  offset="95%"
                  stopColor="#4085b3"
                  stopOpacity={0}
                />
              </linearGradient>
              <linearGradient
                id="colorPv"
                x1="0"
                y1="0"
                x2="0"
                y2="1">
                <stop
                  offset="5%"
                  stopColor="#9bcff2"
                  stopOpacity={0.8}
                />
                <stop
                  offset="95%"
                  stopColor="#9bcff2"
                  stopOpacity={0}
                />
              </linearGradient>
            </defs>
            <XAxis
              dataKey="key"
              tick={{ fontSize: 12, color: "#000" }}
            />
            <YAxis
              label={{
                value: "Visitors",
                angle: -90,
                position: "insideLeft",
                style: { fontSize: 14 },
              }}
              tick={{ fontSize: 12 }}
            />
            <CartesianGrid strokeDasharray="3 3" />
            <Tooltip
              contentStyle={{ fontSize: "12px" }}
              itemStyle={{ fontSize: "12px" }}
              labelStyle={{ fontSize: "13px", fontWeight: "bold" }}
            />
            <Legend wrapperStyle={{ fontSize: "12px" }} />
            <Area
              type="monotone"
              dataKey="uniqueVisitor"
              stroke="#005d9cff"
              fillOpacity={1}
              fill="url(#colorUv)"
            />
            <Area
              type="monotone"
              dataKey="visitor"
              stroke="#31acffff"
              fillOpacity={1}
              fill="url(#colorPv)"
            />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </>
  );
};

export default ViewsChart;
