import React from 'react';
import { capitalize } from 'lodash-es';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import TableBasic from 'src/components/shared/table-basic';
import { getStatementPeriodDetail } from 'src/urls/frontend-royalties';
import type { GetStatementPeriodsQuery } from 'src/apollo/queries/statement-periods/__generated__/statement-periods';

type RecentStatementPeriod = NonNullable<
    GetStatementPeriodsQuery['abacusStatementPeriods']
>['recentPeriods'][0];

interface RecentStatementPeriodsProps {
    recentPeriods: RecentStatementPeriod[];
}

const RecentStatementPeriods: React.FC<RecentStatementPeriodsProps> = ({
    recentPeriods,
}) => {
    const headers = ['Statement period', 'Period ID', 'Date closed', 'Status'];

    const formattedPeriods = () =>
        recentPeriods.map(period => {
            const statementPeriodLink = (
                <Link to={getStatementPeriodDetail(period?.statementPeriodId)}>
                    {period?.statementPeriodName}
                </Link>
            );
            return {
                id: period?.statementPeriodId,
                cols: [
                    statementPeriodLink,
                    period?.statementPeriodId,
                    period?.closedDate || '-',
                    capitalize(period?.statementPeriodStatus),
                ],
            };
        });

    return (
        <div className="StatementPeriods">
            <h3>Recent</h3>
            <TableBasic headers={headers} rows={formattedPeriods()} />
        </div>
    );
};

RecentStatementPeriods.propTypes = {
    recentPeriods: PropTypes.array.isRequired,
};

export default RecentStatementPeriods;