import Image from "next/image";
import "./ProfileTable.scss";
import arrows from "@/shared/icons/arrows.svg";
import { IMyReportsList } from "@/shared/types/my-reports";
import {
  REPORT_STATUS,
  REPORT_STATUS_COLORS,
} from "@/shared/variables/report-status";
import Link from "next/link";

interface IProfileTableProps {
  reports: IMyReportsList;
}

const ProfileTable: React.FC<IProfileTableProps> = ({
  reports,
}: IProfileTableProps) => {
  const params = [
    { param: "Дата", handleClick() {} },
    { param: "Адрес" },
    { param: "Статус" },
    { param: "Комментарии", handleClick() {} },
    { param: "Рейтинг", handleClick() {} },
  ];
  const sliceDate = (date: string) => {
    return `${date.slice(8, 10)}.${date.slice(5, 7)}.${date.slice(
      0,
      4
    )}`;
  };
  return (
    <div className="profile-table">
      <div
        className={`profile-table__wrapper ${
          reports.results.length ? "" : "no-reports-in-profile"
        }`}
      >
        {reports.results.length ? (
          <table>
            <thead>
              <tr>
                {params.map((p) => (
                  <td key={p.param}>
                    {p.handleClick ? (
                      <button>
                        {p.param}{" "}
                        <Image src={arrows} alt="Arrows Icon" />
                      </button>
                    ) : (
                      p.param
                    )}
                  </td>
                ))}
              </tr>
            </thead>
            <tbody>
              {reports.results.map((report) => (
                <tr key={report.id}>
                  <td id="my-report-date">
                    {sliceDate(report.created_at)}
                  </td>
                  <td id="my-report-location">
                    {report.location[0].address}
                  </td>
                  <td
                    id="my-report-status"
                    style={{
                      color: `${REPORT_STATUS_COLORS[report.status]}`,
                    }}
                  >
                    {REPORT_STATUS[report.status]}
                  </td>
                  <td id="my-report-reviews">
                    {report.count_reviews}
                  </td>
                  <td id="my-report-likes">{report.total_likes}</td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <p className="profile-table__message">
            Вы пока не оставили ни одного обращения.
          </p>
        )}
      </div>
      <Link id="my-reports-link" href="/create-report">
        Написать обращение
      </Link>
    </div>
  );
};

export default ProfileTable;