import { PATHS } from '@/shared/constants/paths';
import { useState } from 'react';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
import { LinkPaymentHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-history-wrap';
import {
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
	useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/link-pay/types';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
import { useTranslation } from 'react-i18next';

/**
 * Shipping history tab screen
 */

export const LinkPaymentHistoryPage = () => {
	const { t } = useTranslation();
	const { navigate } = useNavigate();

	// Access check
	const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
		extensionCode: 'LINKPAY'
	});

	const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)

	useSetHeaderTitle(t('additionalService.linkPayment.title'))
	useSetHeaderType(HeaderType.LeftArrow);
	useSetFooterMode(false);
	useSetOnBack(() => {
		navigate(PATHS.home);
	});

	if(!hasAccess){
		return <AccessDeniedDialog />;
	}

	return (
		<>
			<main>
				<div className="tab-content">
					<div className="tab-pane pt-46 active">
						<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
						<LinkPaymentHistoryWrap></LinkPaymentHistoryWrap>
					</div>
				</div>
			</main>
		</>
	);
}