import { Info, Lightbulb, Map, People } from "@mui/icons-material";
import { Box } from "@mui/material";
import type { FC } from "react";
import { useTranslation } from "react-i18next";

import { AssetModel } from "@/contracts/client.schemas";
import { ResponsibleTable } from "@/features";
import { TabList, TabListItem } from "@/shared";

import {
	ObjectInfo,
	ObjectInformation,
} from "../../../components/ObjectInformation";
import { isNumber } from "../../../services/math";
import { OneObjectMap } from "../map/OneObjectMap";

import { ObjectState } from "./ObjectState";

interface Props {
	asset: AssetModel;
}

export const ObjectTabList: FC<Props> = ({ asset }) => {
	const { t } = useTranslation();

	const getObjectInfo = (): ObjectInfo => {
		return {
			appNumber: asset.apartment,
			building: asset.building,
			city: asset.city,
			// contractDate: asset.contractDate,
			// contractNumber: asset.contractNumber,
			country: asset.country,
			description: asset.description,
			// equipmentIds: asset.equipmentIds,
			gateCode: asset.gateCode,
			groups: [],
			house: asset.house,
			intercomCode: asset.intercomCode,
			name: asset.name,
			owner: asset.ownerName,
			ownerPassword: asset.ownerPassword,
			phone1: asset.ownerPhone1,
			phone2: asset.ownerPhone2,
			region: asset.region,
			// shortDescription: settings?.shortDescription,
			street: asset.street,
		} as ObjectInfo;
	};

	const tabs: TabListItem[] = [
		{
			title: t("object"),
			icon: <Info />,
			content: (
				<Box
					sx={{
						overflow: "auto",
						height: "100%",
					}}
				>
					<ObjectInformation object={getObjectInfo()} />
				</Box>
			),
		},
		{
			title: t("state"),
			icon: <Lightbulb />,
			content: <ObjectState asset={asset} />,
		},
		// {
		// 	title: t("photos"),
		// 	icon: <Photo />,
		// 	content: (
		// 		<Box
		// 			sx={{
		// 				width: "100%",
		// 				height: "100%",
		// 				display: "flex",
		// 				alignItems: "center",
		// 				justifyContent: "center",
		// 			}}
		// 		>
		// 			<Photos objectId={asset.id} />
		// 		</Box>
		// 	),
		// },
	];

	if (isNumber(asset.latitude).is && isNumber(asset.longitude).is) {
		tabs.push({
			title: t("map"),
			icon: <Map />,
			content: <OneObjectMap asset={asset} />,
		});
	}

	tabs.push({
		title: t("responsible"),
		icon: <People />,
		content: <ResponsibleTable asset={asset} />,
	});

	return <TabList tabs={tabs} />;
};
