"use client";

import React, { useState } from "react";
import {
  Area,
  AreaChart,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { useInterval } from "@/hooks/useInterval";
import { useSelector } from "react-redux";
import { selectVisitorOnline } from "@/utils/store/features/data/useronline.slice";
import Dropdown from "../form/Dropdown/dropdown";

import styles from "@/components/administrator/ViewRealtime/viewrealtime.module.css";

const ViewRealtime = () => {
  const [data, setData] = useState([]);
  const [interval, setInterval] = useState(1000);

  const visitor = useSelector(selectVisitorOnline);

  useInterval(() => {
    const date = new Date();
    const currentTime = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;

    setData((prev) => {
      const _prev = Array.from(prev);
      if (prev.length > 11) _prev.pop();

      return [{ key: currentTime, visitors: visitor?.length || 0 }, ..._prev];
    });
  }, interval);

  return (
    <>
      <div
        style={{ height: "300px", width: "100%" }}
        className={styles.container}>
        <div className={styles.header_container}>
          <div className={styles.header_title}>
            <p>
              <span>Realtime Visitor</span>
            </p>
            <p>Realtime data of visitor to this website.</p>
          </div>
          <div className={styles.header_action}>
            <Dropdown
              label="Select Interval"
              className={styles.input}
              labelclassname={styles.label}
              data={[
                { label: "1s", value: 1000 },
                { label: "10s", value: 10000 },
                { label: "30s", value: 30000 },
                { label: "1m", value: 60000 },
                { label: "5m", value: 300000 },
                { label: "10m", value: 600000 },
                { label: "30m", value: 1800000 },
                { label: "1h", value: 3600000 },
              ]}
              display="label"
              onClick={(data) => {
                setInterval(data.value);
                setData((prev) => prev.slice(3, -1));
              }}
              value="1s"
            />
          </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>
            </defs>
            <XAxis
              dataKey="key"
              tick={{ fontSize: 12, color: "#000" }}
            />
            <YAxis
              label={{
                value: "Visitors",
                angle: -90,
                position: "insideLeft",
                style: { fontSize: 14 },
              }}
              tick={{ fontSize: 12 }}
              domain={[0, (dataMax) => Math.max(5, dataMax)]}
            />
            <CartesianGrid strokeDasharray="3 3" />
            <Tooltip
              contentStyle={{ fontSize: "12px" }}
              itemStyle={{ fontSize: "12px" }}
              labelStyle={{ fontSize: "13px", fontWeight: "bold" }}
            />
            <Legend wrapperStyle={{ fontSize: "12px" }} />
            <Area
              type="monotone"
              dataKey="visitors"
              stroke="#005d9cff"
              fillOpacity={1}
              fill="url(#colorUv)"
            />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </>
  );
};

export default ViewRealtime;
