import { FC } from "react";
import { useTranslation } from "react-i18next";

import { AssetModel } from "@/contracts/client.schemas";
import { useGetResponsiblePersonList } from "@/contracts/responsible-persons";
import { Phone, TableInfinity } from "@/shared";

import styles from "./ResponsibleTable.module.css";

interface Props {
	asset: AssetModel;
}

export const ResponsibleTable: FC<Props> = ({ asset }) => {
	const { t } = useTranslation();
	const { data: responsibleTable } = useGetResponsiblePersonList(
		{
			AssetId: asset.id,
		},
		{
			query: {
				enabled: !!asset,
			},
		},
	);

	return (
		<div className={styles.container}>
			{!responsibleTable || responsibleTable.items.length === 0 ? (
				<div className={styles.emptyTable}>{t("noData")}</div>
			) : (
				<TableInfinity
					columns={[
						{
							label: t("fioOfResponsible"),
							width: 3,
						},
						{
							label: t("note"),
							width: 2,
						},
						{
							label: t("phone1"),
							width: 2,
						},
						{
							label: t("phone2"),
							width: 2,
						},
					]}
					rows={responsibleTable.items.map((x) => ({
						values: [
							x.name || "-",
							x.note || "-",
							x.phone1 ? <Phone value={x.phone1} /> : "-",
							x.phone2 ? <Phone value={x.phone2} /> : "-",
						],
					}))}
				/>
			)}
		</div>
	);
};
