import React, { useEffect, useState } from 'react';
import { Select } from '@theorchard/suite-components';
import { useStatementPeriodsList } from 'src/apollo/queries/statement-periods';
import { STATEMENT_PERIOD_STATUSES } from 'src/constants';
import type { ListViewItem } from '@theorchard/suite-components';
import type { GetStatementPeriodsListQuery } from 'src/apollo/queries/statement-periods/__generated__/get-statement-periods-list';

type _AbacusStatementPeriodsList = NonNullable<
    GetStatementPeriodsListQuery['abacusStatementPeriodsList']
>;
type AbacusStatementPeriod = _AbacusStatementPeriodsList['items'][0];

const SEARCH_PLACEHOLDER = 'Statement Period';

type SelectProps = React.ComponentProps<typeof Select>;

export interface StatementPeriodDropdownPropTypes extends Omit<
    SelectProps,
    'value'
> {
    className?: string;
    compact?: boolean;
    isDisabled?: boolean;
    fieldTextMaxWidth?: number;
    menuMaxWidth?: number;
    onChange: (e: ListViewItem | undefined) => void;
    value?: string;
}

export const StatementPeriodDropdown: React.FC<
    StatementPeriodDropdownPropTypes
> = ({
    className = '',
    compact = false,
    isDisabled = false,
    fieldTextMaxWidth,
    menuMaxWidth,
    onChange,
    value,
    ...props
}) => {
    const [statementPeriods, setStatementPeriods] = useState<ListViewItem[]>(
        []
    );
    const { data, loading } = useStatementPeriodsList(1000, 0);

    useEffect(() => {
        if (data) {
            const { abacusStatementPeriodsList }: GetStatementPeriodsListQuery =
                data;
            if (abacusStatementPeriodsList) {
                const options: ListViewItem[] = [];

                abacusStatementPeriodsList?.items?.forEach(
                    (statementPeriod: AbacusStatementPeriod) => {
                        if (
                            [
                                STATEMENT_PERIOD_STATUSES.CLOSED,
                                STATEMENT_PERIOD_STATUSES.CURRENT,
                            ].includes(statementPeriod.statementPeriodStatus)
                        )
                            options.push({
                                label: statementPeriod.statementPeriodName,
                                value: statementPeriod.statementPeriodId,
                            });
                    }
                );
                options.sort(
                    (a, b) => parseInt(b.value, 10) - parseInt(a.value, 10)
                );
                setStatementPeriods(options);
            }
        }
    }, [data, loading]);

    return (
        <>
            <Select
                className={`SelectStatementPeriod ${className}`}
                disabled={isDisabled || loading}
                fieldTextMaxWidth={fieldTextMaxWidth}
                id="statementPeriod"
                menuMaxWidth={menuMaxWidth}
                onChange={onChange}
                options={statementPeriods}
                placeholder={SEARCH_PLACEHOLDER}
                selectedValue={!loading ? value : ''}
                compact={compact}
                {...props}
            />
        </>
    );
};

export default StatementPeriodDropdown;