import { ISaleRanking } from "metarare";
import * as React from "react";
import styles from "./RankingTable.scss";
import classNames from "classnames/bind";
import currency from "currency.js";
import { useHistory } from "react-router-dom";
import URLInfo from "@src/constants/URLInfo";

const cx = classNames.bind(styles);

export interface IRankingTableProps{
    data: ISaleRanking[];
}

export default function RankingTable({data}: IRankingTableProps) {
  const history = useHistory()
  const header = ["", "Store", "", "Total Value"];
  const renderColor = (rank: number) => {
    if (rank === 1) return "#ffd700";
    if (rank === 2) return "#c0c0c0";
    if (rank === 3) return "#cd7f32";
    if(rank <= 10 ) return "#3d3d3d";
    return "unset";
  };
  
  const navigate = (path: string) => {
    history.push(path)
  }
  return (
    <div className={cx("table_wrapper")}>
      <table>
        <thead>
          <tr>
            {header.map((item, index) => (
              <th key={index}>{item}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={"custom-table-ranking" + index} onClick={() =>{
              navigate(URLInfo.getProfileUserUrl(item.name || ""))
            }}>
              <td className={cx("rank")} >
                <div style={{
                    background: renderColor(item.rank),
                    color: item.rank <= 10 ? '#fff' : '#000'
                }}>{item.rank}</div></td>
              <td className={cx("thumbnail_image")}>
                <img src={item.thumbnail_image} alt={item.name} />
              </td>
              <td className={cx("name")}>{item.name}</td>
              <td className={cx("total_revenue")}>{currency(item.amounts_sale).format({
                    symbol: "$",
                    precision: 0,
              })}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
