import React, { useState, useEffect } from 'react';
import { LoadingIndicator, Alert } from '@theorchard/suite-components';
import { useStatementPeriods } from 'src/apollo/queries/statement-periods';
import RecentStatementPeriods from './recent-statement-periods';
import UpcomingStatementPeriods from './upcoming-statement-periods';
import type { GetStatementPeriodsQuery } from 'src/apollo/queries/statement-periods/__generated__/statement-periods';
import './styles.scss';

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

const StatementPeriods: React.FC = () => {
    const [recentPeriods, setRecentPeriods] = useState<RecentStatementPeriod[]>(
        []
    );
    const [upcomingPeriods, setUpcomingPeriods] = useState<
        UpcomingStatementPeriod[]
    >([]);
    const { data, error, loading } = useStatementPeriods();

    useEffect(() => {
        if (data?.abacusStatementPeriods?.recentPeriods) {
            const { recentPeriods: statementPeriods } =
                data.abacusStatementPeriods;
            setRecentPeriods(statementPeriods);
        }

        if (data?.abacusStatementPeriods?.upcomingPeriods)
            setUpcomingPeriods(data.abacusStatementPeriods.upcomingPeriods);
    }, [data]);

    if (loading) return <LoadingIndicator />;

    return (
        <div>
            {error && <Alert variant="error" text={error.message} />}
            <RecentStatementPeriods recentPeriods={recentPeriods} />
            <UpcomingStatementPeriods upcomingPeriods={upcomingPeriods} />
        </div>
    );
};

export default StatementPeriods;