"use client";

import SectionHeader from "@/Shared/UI/SectionHeader/SectionHeader";
import "./RatingSection.scss";
import SearchBar from "@/Features/SearchBar/SearchBar";
import arrow_down_icon from "./icons/arrow-down-icon.svg";
import arrow_up_icon from "./icons/arrow-up-icon.svg";
import like_icon from "./icons/like-icon.svg";
import message_icon from "./icons/message-icon.svg";
import Image from "next/image";
import { useRating } from "./rating.store";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useDebounce } from "use-debounce";
import RoadType from "@/Entities/RoadType/RoadType";
import {
  ROAD_TYPES,
  ROAD_TYPES_COLORS,
} from "@/Shared/variables/road-types";

interface IRatingSection {
  [key: string]: string;
}

const RatingSection: React.FC<IRatingSection> = ({
  categories = "1,2,3,4,5,6",
  queryMap,
  queryRating,
}: IRatingSection) => {
  const { data: reports, getRatings } = useRating();
  const [search, setSearch] = useState<string>(queryRating);
  const [query] = useDebounce(search, 500);

  const router = useRouter();

  useEffect(() => {
    getRatings(query);
  }, [query]);

  useEffect(() => {
    router.push(
      `/?тип-дороги=${categories}${
        queryMap ? `&карта-дорог=${queryMap}` : ""
      }${query ? `&рейтинг=${query}` : ""}`,
      {
        scroll: false,
      }
    );
  }, [query, router, categories]);

  const sliceDate = (date: string) => {
    return `${date.slice(8, 10)}.${date.slice(5, 7)}.${date.slice(
      0,
      4
    )}`;
  };

  const sliceLocation = (location: string) => {
    if (location.length > 15) return `${location.slice(0, 15)}...`;

    return location;
  };

  const sliceDescription = (description: string) => {
    if (description.length > 49) {
      return `${description.slice(0, 50)}...`;
    }

    return description;
  };

  return (
    <div className="rating-section">
      <SectionHeader description="Yorem ipsum dolor sit amet, consectetur adipiscing elit.">
        Рейтинг
      </SectionHeader>
      <SearchBar
        value={search}
        setValue={setSearch}
        placeholder="Введите адрес"
      />

      <div className="rating-section__table">
        <table>
          <thead>
            <tr>
              <th id="report-header-date" tabIndex={0}>
                <div>
                  Дата
                  <Image src={arrow_down_icon} alt="Arrow Down" />
                  <Image src={arrow_up_icon} alt="Arrow Up" />
                </div>
              </th>
              <th>Адрес</th>
              <th>Статус</th>
              <th>Описание</th>
              <th id="report-header-comment" tabIndex={0}>
                <div>
                  Комментарии
                  <Image src={arrow_down_icon} alt="Arrow Down" />
                  <Image src={arrow_up_icon} alt="Arrow Up" />
                </div>
              </th>
              <th id="report-header-like" tabIndex={0}>
                <div>
                  Рейтинг
                  <Image src={arrow_down_icon} alt="Arrow Down" />
                  <Image src={arrow_up_icon} alt="Arrow Up" />
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            {reports.results.map((report) => (
              <tr key={report.id}>
                <td id="report-date">
                  {sliceDate(report.created_at)}
                </td>
                <td id="report-location">
                  <Link href={`/report/${report.location[0].id}`}>
                    {sliceLocation(report.location[0].address)}
                  </Link>
                </td>
                <td id="report-type">
                  <RoadType
                    color={ROAD_TYPES_COLORS[report.category]}
                  >
                    {ROAD_TYPES[report.category]}
                  </RoadType>
                </td>
                <td id="report-description">
                  <p>{sliceDescription(report.description)}</p>
                </td>
                <td id="report-comment">
                  <div>
                    <Image src={message_icon} alt="Message Icon" />
                    {report.count_reviews}
                  </div>
                </td>
                <td id="report-like">
                  <div>
                    <Image src={like_icon} alt="Like Icon" />
                    {report.total_likes}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default RatingSection;
