"use client";

import "./VolunteersTable.scss";
import Image from "next/image";
import arrows from "@/shared/icons/arrows.svg";
import { useEffect, useState } from "react";
import { useVolunteersStore } from "./volunteers.store";

const VolunteersTable = () => {
  const { data, isLoading, error, getVolunteers } =
    useVolunteersStore();
  const [filter, setFilter] = useState({
    option: "report_count",
    toggle: true,
  });
  const params = [
    { param: "№" },
    { param: "Активист" },
    { param: "Фамилия имя"},
    {
      param: "Добавлено дорог",
      handleClick() {
        if (filter.option !== "report_count") {
          return setFilter({
            option: "report_count",
            toggle: false,
          });
        }

        setFilter((prev) => {
          return { option: "report_count", toggle: !prev.toggle };
        });

        getVolunteers(filter);
      },
    },
    {
      param: "Получено голосов",
      handleClick() {
        if (filter.option !== "likes_given_count") {
          return setFilter({
            option: "likes_given_count",
            toggle: false,
          });
        }

        setFilter((prev) => {
          return {
            option: "likes_given_count",
            toggle: !prev.toggle,
          };
        });

        getVolunteers(filter);
      },
    },
    {
      param: "Оставлено голосов",
      handleClick() {
        if (filter.option !== "likes_received_count") {
          return setFilter({
            option: "likes_received_count",
            toggle: false,
          });
        }

        setFilter((prev) => {
          return {
            option: "likes_received_count",
            toggle: !prev.toggle,
          };
        });

        getVolunteers(filter);
      },
    },
    {
      param: "Рейтинг",
      handleClick() {
        if (filter.option !== "average_rating") {
          return setFilter({
            option: "average_rating",
            toggle: false,
          });
        }

        setFilter((prev) => {
          return { option: "average_rating", toggle: !prev.toggle };
        });

        getVolunteers(filter);
      },
    },
  ];
  const hideEmail = (email: string) => {
    return `${email.slice(0, 3)}*****@****.com`;
  };

  useEffect(() => {
    getVolunteers(filter);
  }, []);
  return (
    <div className="volunteers-table">
      <table>
        <thead>
          <tr>
            {params.map((param) => (
              <td key={param.param}>
                {param.handleClick ? (
                  <button onClick={param.handleClick}>
                    {param.param}
                    <Image src={arrows} alt="Arrows Icon" />
                  </button>
                ) : (
                  <>{param.param}</>
                )}
              </td>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((user, index) => (
            <tr key={user.user_id}>
              <td>{index + 1}</td>
              <td id="volunteers-user-cell">
                {hideEmail(user.username)}
              </td>
              <td>{user.username}</td>
              <td>{user.report_count}</td>
              <td>{user.likes_received_count}</td>
              <td>{user.likes_given_count}</td>
              <td>{user.average_rating}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default VolunteersTable;