import React, { useEffect, useState } from 'react';
import { GridTable } from '@theorchard/suite-components';
import { useReferenceMechanicalRates } from 'src/apollo/queries/reference-mechanical-rate';
import { getDateFromDateTimeStamp } from 'src/utils/date-helpers';
import type { ReferenceMechanicalRate } from 'src/types/contract-mechanical-rate';

const MechanicalRates = () => {
    const [mechanicalRates, setMechanicalRates] =
        useState<ReferenceMechanicalRate[]>();
    const { data, loading } = useReferenceMechanicalRates();

    const formatMechanicalRates = (
        rawMechanicalRates: ReferenceMechanicalRate[]
    ) =>
        rawMechanicalRates.map((mechRate: ReferenceMechanicalRate) => {
            const {
                referenceMechanicalRateId,
                effectiveStartDate,
                baseRate,
                minuteRate,
                ringtoneRate,
            } = mechRate;

            return {
                referenceMechanicalRateId,
                effectiveStartDate:
                    getDateFromDateTimeStamp(effectiveStartDate),
                baseRate,
                minuteRate,
                ringtoneRate,
            };
        });

    useEffect(() => {
        if (
            data?.abacusReferenceMechanicalRates?.items &&
            data?.abacusReferenceMechanicalRates?.items.length > 0
        ) {
            const formattedMechRates = formatMechanicalRates(
                data.abacusReferenceMechanicalRates.items
            );
            setMechanicalRates(formattedMechRates);
        }
    }, [data]);

    return (
        <>
            <h2>United States Mechanical Rates</h2>
            <GridTable
                bordered
                data={mechanicalRates}
                loading={loading}
                columnDefs={[
                    {
                        name: 'effectiveStartDate',
                        title: 'Effective Date',
                    },
                    {
                        name: 'baseRate',
                        title: 'Base Rate (USD)',
                        template: { align: 'right' },
                    },
                    {
                        name: 'minuteRate',
                        title: 'Minute Rate (USD)',
                        template: { align: 'right' },
                    },
                ]}
            />

            <h2>United States Ringtone Rates</h2>
            <GridTable
                bordered
                data={mechanicalRates}
                loading={loading}
                columnDefs={[
                    {
                        name: 'effectiveStartDate',
                        title: 'Effective Date',
                    },
                    {
                        name: 'ringtoneRate',
                        title: 'Base Rate (USD)',
                        template: { align: 'right' },
                    },
                ]}
            />
        </>
    );
};

export default MechanicalRates;