"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 { useEffect } from "react";
import Link from "next/link";

const RatingSection = () => {
  const { data: reports, getRatings } = useRating();

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

  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 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">
                  <span>Разбитая дорога</span>
                </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;