"use client";

import "./StatisticsTable.scss";
import Image from "next/image";
import arrow_down_icon from "./icons/arrow-down-icon.svg";
import arrow_up_icon from "./icons/arrow-up-icon.svg";
import Link from "next/link";
import chevron_down from "./icons/chevron-down.svg";
import { useStatistics } from "./statistics.store";
import { useEffect, useState } from "react";

const StatisticsTable = () => {
  const [location, setLocation] = useState("village");
  const [locationMenu, setLocationMenu] = useState(false);
  const { data, getStatistics } = useStatistics();

  const locations = [
    { id: 1, name: "Регион", type: "state" },
    { id: 2, name: "Город", type: "city" },
    { id: 3, name: "Деревня", type: "village" },
  ];

  useEffect(() => {
    getStatistics();
  }, []);

  return (
    <div className="statistics-table">
      {locationMenu && (
        <ul
          onClick={(e) => e.stopPropagation()}
          className="statistics-table__location"
        >
          {locations.map((loc) => (
            <li
              key={loc.id}
              id={
                location === loc.type
                  ? "statistics-table__location_active"
                  : ""
              }
            >
              <button
                onClick={() => {
                  setLocation(loc.type);
                  getStatistics(loc.type);
                  setLocationMenu(false);
                }}
              >
                {loc.name}
              </button>
            </li>
          ))}
        </ul>
      )}
      <div className="statistics-table__wrapper">
        <table cellSpacing={0}>
          <thead>
            <tr>
              <th
                tabIndex={1}
                onClick={() => setLocationMenu((prev) => !prev)}
              >
                <div>
                  Город
                  <Image src={chevron_down} alt="Chevron Icon" />
                </div>
              </th>
              <th tabIndex={1}>
                <div className="statistics-table__header">
                  Добавлено дорог
                  <div>
                    <Image
                      src={arrow_down_icon}
                      alt="Arrow Down Icon"
                    />
                    <Image src={arrow_up_icon} alt="Arrow Up Icon" />
                  </div>
                </div>
              </th>
              <th tabIndex={1}>
                <div className="statistics-table__header">
                  Локальных дефектов
                  <div>
                    <Image
                      src={arrow_down_icon}
                      alt="Arrow Down Icon"
                    />
                    <Image src={arrow_up_icon} alt="Arrow Up Icon" />
                  </div>
                </div>
              </th>
              <th tabIndex={1}>
                <div className="statistics-table__header">
                  Очагов аварийности
                  <div>
                    <Image
                      src={arrow_down_icon}
                      alt="Arrow Down Icon"
                    />
                    <Image src={arrow_up_icon} alt="Arrow Up Icon" />
                  </div>
                </div>
              </th>
              <th tabIndex={1}>
                <div className="statistics-table__header">
                  Локальных дефектов исправлено
                  <div>
                    <Image
                      src={arrow_down_icon}
                      alt="Arrow Down Icon"
                    />
                    <Image src={arrow_up_icon} alt="Arrow Up Icon" />
                  </div>
                </div>
              </th>
              <th tabIndex={1}>
                <div className="statistics-table__header">
                  В планах ремонта
                  <div>
                    <Image
                      src={arrow_down_icon}
                      alt="Arrow Down Icon"
                    />
                    <Image src={arrow_up_icon} alt="Arrow Up Icon" />
                  </div>
                </div>
              </th>
              <th tabIndex={1}>
                <div className="statistics-table__header">
                  Отремонтировано
                  <div>
                    <Image
                      src={arrow_down_icon}
                      alt="Arrow Down Icon"
                    />
                    <Image src={arrow_up_icon} alt="Arrow Up Icon" />
                  </div>
                </div>
              </th>
            </tr>
          </thead>

          <tbody>
            {data.length !== 0 ? (
              data.map((statistic) => (
                <tr>
                  <td>{statistic.name}</td>
                  <td>{statistic.broken_road_1}</td>
                  <td>{statistic.local_defect_3}</td>
                  <td>{statistic.hotbed_of_accidents_2}</td>
                  <td>{statistic.local_defect_fixed_6}</td>
                  <td>{statistic.repair_plans_4}</td>
                  <td>{statistic.repaired_5}</td>
                </tr>
              ))
            ) : (
              <tr>
                <td style={{ textAlign: "center" }} colSpan={7}>
                  Looks like there is no data for {location}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default StatisticsTable;