'use client';

import React, { useState, useEffect, useRef } from "react";
import * as Separator from "@radix-ui/react-separator";
import { ReceiptSearch } from "iconsax-react";
import LogContainer from "@/src/components/dashboard/logcontainer";
import { useParams, useRouter } from "next/navigation";
import dashStyles from "@/src/styles/dash.module.css";
import Link from "next/link";
import axios from "axios";
import InfiniteScroll from "react-infinite-scroll-component";

function skeletonLogs(guild?: string, amount = 10) {
  return new Array(amount).fill(null).map((_, i) => {
    return (
      <section className="mt-8 flex flex-col gap-4" key={i}>
        <LogContainer
          skeleton={true}
          name=""
          linkedto=""
          creator=""
          time=""
          status=""
          id={`log-${i}`}
          guild={guild}
        />
      </section>
    )
  });
}

export default function Page() {
  const id = useParams()?.id.toString();
  const router = useRouter();

  const [logs, setLogs] = useState<any[]>([]);
  const [hasMore, setHasMore] = useState(true);

  const fetch = async () => {
    try {
      const response = await axios.get(`/api/db/logs/tickets?guild=${id}&skip=${logs.length}`);
      setLogs((previous) => [...previous, ...response.data]);
      if (response.data.length < 10) setHasMore(false);
      console.log(hasMore)
    } catch (error: any) {
      if (error.response.status === 401) router.push(error.response.data.redirect);
    }
  };

  useEffect(() => {
    fetch();
  }, [id]);

  return (
    <div
      className={`grid grid-col-4 ${dashStyles.container_body} grid-flow-col gap-5 flex-wrap w-full h-[100vh] overflow-y-scroll pb-[12rem]`}
    >
      <div className={`mx-auto w-[85%] mt-10 truncate ${dashStyles.overflowInitial}`}>
        <h4 className="text-[1.6rem] font-medium">Logs</h4>
        <p className="text-[15px] mt-3 text-[#9a9aa9]">
          Here you can edit ticket panels and general ticket's settings
        </p>
        <Separator.Root className="bg-[#232735] data-[orientation=horizontal]:h-px w-full data-[orientation=vertical]:h-full my-[15px]" />
        <section className="mt-7">
          <div className="container mt-8 bg-[#1a1d28] rounded-md p-6 px-8">
            <div className="flex justify-between mb-6">
              <label className="text-[1.2rem]">Your Ticket Log</label>
            </div>
            <Separator.Root className="bg-[#232735] data-[orientation=horizontal]:h-px w-full data-[orientation=vertical]:h-full my-[15px]" />
            <div className="flex flex-col gap-3 mt-4 ">
              <label className="text-[#8f8f9e]">Search For Ticket</label>
              <div className="bg-[#232735] rounded-md flex gap-2 pl-3 items-center">
                <ReceiptSearch size="32" color="#525669" />
                <input
                  type="text"
                  className="bg-[#232735] p-3 outline-none w-full rounded-md"
                  placeholder="Ticket Name"
                />
              </div>
            </div>
            <div className="mt-8 justify-between flex flex-row gap-6 w-[70%] pl-7">
              <p className="text-[#8f8f9e] text-sm">Info</p>
              <p className={`relative left-[12%] text-[#8f8f9e] text-sm ${dashStyles.res_panel_cont}`}>
                Status
              </p>
              <p className={`relative left-[9%] text-[#8f8f9e] text-sm ${dashStyles.res_panel_cont}`}>
                Creator
              </p>
              <p className={`relative right-[2%] text-[#8f8f9e] text-sm ${dashStyles.res_panel_cont}`}>
                Date
              </p>
            </div>
            <InfiniteScroll
              dataLength={logs.length}
              next={fetch}
              hasMore={hasMore}
              loader={skeletonLogs(id)}
            >
              {logs && logs.map((ticket: any) => {
                return (
                  <section className="mt-8 flex flex-col gap-4" key={ticket.ticketid}>
                    <Link href={`/dashboard/${id}/ticketlogs/${ticket.ticketid}`}>
                      <LogContainer
                        name={ticket.channelname}
                        linkedto={ticket.panelname}
                        creator={`@${ticket.creator}`}
                        time={new Date(ticket.opendate).toLocaleString()}
                        id={`log-${ticket.ticketid}`}
                        guild={id}
                        status={ticket.open ? "1" : "2"}
                      />
                    </Link>
                </section>
                );
              })}
            </InfiniteScroll>
          </div>
        </section>
      </div>
    </div>
  );
}