import { scheduleList, tableTitle1 } from "../../data";
import Image from "next/image";
import Button from "@/components/Button";
import userImage from "../../../public/images/1689673213899_approachA.png";
import React from "react";
import { AiFillDelete } from "react-icons/ai";
import { AiTwotoneEdit } from "react-icons/ai";
// import { toast } from 'react-toastify';
import toast, { Toaster } from "react-hot-toast";

import { useState } from "react";
import { useQuery } from "react-query";
import src from "@/assets/image/pro1.png";
import axios from "axios";
import Modal from "./Modal";

type Item = {
  userid: number;
  email: string;
  firstname: string;
  initials: string;
  phone: number;
  surname: string;
  profileImage?: string;
};
const Userdata = () => {
  const [dataa, setData] = useState<Item[]>([]);
  const [showModel, setShowModel] = useState(false);
  const [userid, setUserid] = useState(0);

  // A function returing async function
  function fetchPresenter() {
    return async () => {
      const response = await fetch("api/presenterdata");
      const data = await response.json();
      setData(data);
    };
  }

  // using react query
  const { isLoading, error, data, refetch } = useQuery(
    "presenterData",
    fetchPresenter,
  );

  // post request function using axios
  async function postData(userid: number) {
    try {
      const res = await fetch("api/presenterdelete", {
        method: "POST",
        body: JSON.stringify(userid),
        headers: { "Content-Type": "application/json" },
      });

      if (res.ok) {
        // showToastMessage();
        refetch();
        toast.error("Deleted!");
      } else {
        toast.error("failed Deleted!");
      }
    } catch (error) {
      console.error("error:" + error); // Handle the error
    }
  }

  // const deletePresenterData = async (userId: Number) => {
  //   const response = await axios.post('api/presenterdelete', {
  //     userId,
  //   });

  //   console.log('response ', response);
  // };

  // // passing object as a props for update
  // function updatePresenter(obj: Item) {}

  if (isLoading) {
    return <div>Loading....</div>;
  }
  return (
    <div className="grid grid-cols-2 gap-3">
      <div className="relative p-2 overflow-x-auto shadow-md sm:rounded-lg">
        <table className="w-full text-sm text-left text-gray-500">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
            <tr>
              {tableTitle1.map((tableTitledata) => (
                <th key={tableTitledata.id} scope="col" className="px-6 py-3">
                  {tableTitledata.name}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {/* {scheduleList.map((scheduleListdata) => { */}
            {/* // return scheduleListdata.hasOwnProperty("schedule") ? ( */}

            {dataa.slice(dataa.length / 2, dataa.length).map((Item) => (
              <tr key={Item.userid} className="bg-white border-b">
                <td className="py-4 pl-0 pr-6">
                  <table>
                    <tbody>
                      <tr>
                        <td>
                          <div className="flex">
                            <div>
                              {Item.profileImage && (
                                <Image
                                  // src="https://w7.pngwing.com/pngs/340/946/png-transparent-avatar-user-computer-icons-software-developer-avatar-child-face-heroes.png"
                                  // src="../../../public/images/1689673213899_approachA.png"
                                  src={Item.profileImage}
                                  className="w-[4rem] mx-2 mb-1 rounded-full h-30"
                                  alt="Avatar"
                                  width={25}
                                  height={25}
                                />
                              )}
                            </div>
                            <div className="pt-1">
                              <p>{Item.firstname + " " + Item.surname}</p>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
                <td className="px-6 py-4">{Item.initials}</td>
                <td className="px-6 py-4">{Item.email}</td>
                <td className="px-6 py-4">{Item.phone}</td>
                <td className="px-0 py-0" onClick={() => postData(Item.userid)}>
                  {/* <AiFillDelete /> */}
                  <Button
                    linktext="Delete"
                    linkclassname="text-white bg-red-500 mx-[13px] rounded-[5px]"
                    // onclick="setShowModal(true)"
                    // modaltitle="Edit presenter"
                  />
                </td>
                <td
                  className="px-0 py-0"
                  onClick={() => console.log("Current Item:", Item)}
                >
                  {/* <AiTwotoneEdit /> */}
                  <Button
                    CurrentItem={Item}
                    linktext="Edit"
                    linkclassname="text-white bg-purple rounded-[5px]"
                    onclick="setShowModal(true)"
                    modaltitle="Edit presenter"
                  />
                </td>
              </tr>
            ))}
            {/* ) : (
              "" */}
          </tbody>
        </table>
      </div>
      <div className="relative p-2 overflow-x-auto shadow-md sm:rounded-lg">
        <table className="w-full text-sm text-left text-gray-500">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50 ">
            <tr>
              {tableTitle1.map((tableTitledata) => (
                <th key={tableTitledata.id} scope="col" className="px-6 py-3">
                  {tableTitledata.name}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {/* {scheduleList.map((scheduleListdata) => { */}
            {/* // return scheduleListdata.hasOwnProperty("schedule") ? ( */}

            {dataa.slice(0, dataa.length / 2).map((Item) => (
              <tr key={Item.userid} className="bg-white border-b">
                <td className="py-4 pl-0 pr-6">
                  <table>
                    <tbody>
                      <tr>
                        <td>
                          <div className="flex">
                            <div>
                              {Item.profileImage && (
                                <Image
                                  src={Item.profileImage}
                                  className="w-[4rem] mx-2 mb-1 rounded-full h-30"
                                  alt="Avatar"
                                  width={25}
                                  height={25}
                                />
                              )}
                            </div>
                            <div className="pt-1">
                              <p>{Item.firstname + " " + Item.surname}</p>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
                <td className="px-6 py-4">{Item.initials}</td>
                <td className="px-6 py-4">{Item.email}</td>
                <td className="px-6 py-4">{Item.phone}</td>
                <td className="px-0 py-0" onClick={() => postData(Item.userid)}>
                  {/* <AiFillDelete /> */}
                  <Button
                    linktext="Delete"
                    linkclassname="text-white bg-red-500 mx-[13px] rounded-[5px]"
                    // onclick="setShowModal(true)"
                    // modaltitle="Edit presenter"
                  />
                </td>
                <td
                  className="px-0 py-0"
                  onClick={() => console.log("Current Item:", Item)}
                >
                  {/* <AiTwotoneEdit /> */}
                  <Button
                    CurrentItem={Item}
                    linktext="Edit"
                    linkclassname="text-white bg-purple rounded-[5px]"
                    onclick="setShowModal(true)"
                    modaltitle="Edit presenter"
                  />
                </td>
              </tr>
            ))}
            {/* ) : (
              "" */}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Userdata;