import React from 'react';
import { Section } from '@theorchard/suite-components';

import ContractEarningsTransfersButtons from 'src/components/contract-earnings-transfer-list/contract-earnings-transfers-buttons';
import ContractEarningsTransferList from 'src/components/contract-earnings-transfer-list/contract-earnings-transfer-list';
import { AbacusEarningsTransferTypesFilter } from 'src/apollo/definitions/globalTypes';
import { useParams } from 'react-router-dom';

const ContractEarningsTransfers: React.FC = () => {
    const { contractId } = useParams<{ contractId: string }>();

    return (
        <Section className="ContractEarningsTransfer-Section">
            <Section.Header>
                <div className="d-flex flex-column ContractEarningsTransfer-Header">
                    <div className="d-flex flex-row align-items-center">
                        <Section.Title className="h3">
                            Transfer of Earnings
                        </Section.Title>
                        <ContractEarningsTransfersButtons
                            contractId={contractId}
                        />
                    </div>
                </div>
            </Section.Header>

            <Section.Body>
                <ContractEarningsTransferList
                    title="Override"
                    transferType={AbacusEarningsTransferTypesFilter.OVERRIDE}
                />

                <Section.Divider />

                <ContractEarningsTransferList
                    title="Balance Transfer"
                    transferType={AbacusEarningsTransferTypesFilter.RECLASS}
                />

                <Section.Divider />

                <ContractEarningsTransferList
                    title="Transfer of Income"
                    transferType={AbacusEarningsTransferTypesFilter.TRANSFER}
                />
            </Section.Body>
        </Section>
    );
};

export default ContractEarningsTransfers;