import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import TransactionTopNav from './TransactionTopNav';
import api from '../../config/api';
import TransactionsTable from './TransactionsTable';

interface Document {
    documentId: string;
    name: string;
}

interface Recipient {
    id: string;
    index: number;
    firstName: string;
    lastName: string;
    type: string;
    status: string;
    viewedDateTime?: string;
    signedDateTime?: string;
}

export interface Transaction {
    transactionId: string;
    name: string;
    createAt: string;
    lastModifiedAt: string;
    status: string;
    signingOrder: boolean;
    documents: Document[];
    recipients: Recipient[];
}

export interface TransactionResponse {
    content: Transaction[];
    pageNumber: number;
    totalPages: number;
    pageSize: number;
}

const Transactions = () => {
    const { filterParam } = useParams();
    const [transactionData, setTransactionData] = useState<Transaction[]>([]);

    useEffect(() => {
        api.get<TransactionResponse>(
            `api/transaction?transactionStatus=${filterParam === "all" ? "" : filterParam?.toUpperCase()}`
        )
            .then(res => setTransactionData(res.data.content))
            .catch(err => console.error(err));
    }, [filterParam]);

    return (
        <div>
            {filterParam && <TransactionTopNav filterType={filterParam} />}
            {/* <h2 className="text-cl font-semibold text-gray-800 mb-2.5">Transactions</h2> */}
            {/* <TransactionsTable transactionData={transactionData} /> */}
        </div>
    );
};

export default Transactions;