"use client";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { toast } from "sonner";

import { Input } from "@/components/ui/input";
import { close, error, loading, successCallback } from "@/config/swal";
import {
  listData5Data,
  listDataAllNonPagination,
  mediaTrackingSave,
} from "@/service/media-tracking/media-tracking";
import { useEffect, useState } from "react";

export default function TrackingMediaModal(props: {
  triggerFetch: () => void;
}) {
  const [content, setContent] = useState<any>([]);
  const [inputValue, setInputValue] = useState("");
  const [selectedId, setSelectedId] = useState(0);
  useEffect(() => {
    initFecth();
  }, []);

  const initFecth = async () => {
    const response = await listData5Data();
    setContent(response?.data?.data.content);
  };

  const fecthAll = async (search?: string) => {
    const response = await listDataAllNonPagination(search || inputValue);
    setContent(response?.data?.data.content);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    const nowLength = value.split(" ").length;
    const prevLength = inputValue.split(" ").length;

    setInputValue(value);

    if (value === "") {
      initFecth();
      setSelectedId(0);
    }

    if (/\s/.test(value)) {
      console.log("Terdapat spasi dalam input");
      fecthAll();
    }

    if (nowLength !== prevLength) {
      fecthAll();
    }
  };

  const doSave = async () => {
    loading();
    const req = {
      mediaUploadId: selectedId,
      duration: 24,
      scrapingPeriod: 3,
    };

    const res = await mediaTrackingSave(req);
    if (res?.error) {
      error(res?.message);
      return false;
    }
    close();

    toast("Berhasil Menambahkan", {
      description: "",
    });
    props.triggerFetch();
    return false;
  };

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button className="bg-blue-600" size="md">
          Tracking Berita
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Form Tracking Berita</DialogTitle>
        </DialogHeader>
        <div className="flex flex-col gap-2">
          {" "}
          <Input
            type="text"
            placeholder="Content"
            value={inputValue}
            onChange={handleInputChange}
          />{" "}
          <div className="w-full border rounded-md text-xs p-2 flex flex-col gap-1 max-h-[300px] overflow-auto">
            {content.length > 0 &&
              content.map((item: any) => (
                <a
                  key={item.id}
                  className={`cursor-pointer ${
                    selectedId === item.id ? "font-bold" : ""
                  }`}
                  onClick={() => {
                    setSelectedId(item.id);
                    setInputValue(item.title);
                    fecthAll(item.title);
                  }}
                >
                  {item.title}
                </a>
              ))}
          </div>
        </div>
        {/* <DialogFooter className="sm:justify-start">
          <DialogClose asChild>
            <Button type="button">Close</Button>
          </DialogClose>
        </DialogFooter> */}
        <DialogFooter className="flex justify-end gap-2">
          <Button className="bg-blue-600 text-white" onClick={doSave}>
            Tracking Berita
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}