import React, { useEffect, useState } from 'react';
import { Select } from '@theorchard/suite-components';
import { useStatementPeriodAdjustmentFilesUsers } from 'src/apollo/queries/adjustment';
import type { ListViewItem } from '@theorchard/suite-components';
import type { StatementPeriodAdjustmentFileUserActions } from 'src/apollo/definitions/globalTypes';
import type { GetStatementPeriodAdjustmentFileUsersQuery } from 'src/apollo/queries/adjustment/__generated__/get-statement-period-adjustment-file-users';

type AbacusStatementPeriodAdjustmentFileUsers = NonNullable<
    GetStatementPeriodAdjustmentFileUsersQuery['abacusStatementPeriodAdjustmentFileUsers']
>;
type AbacusStatementPeriodAdjustmentFileUser =
    AbacusStatementPeriodAdjustmentFileUsers['items'][0];

const SEARCH_PLACEHOLDER = 'Added By';

export interface AdjustmentsFileUsersSelectPropTypes {
    action: StatementPeriodAdjustmentFileUserActions;
    className?: string;
    compact?: boolean;
    isDisabled?: boolean;
    fieldTextMaxWidth?: number;
    menuMaxWidth?: number;
    onChange: (e: ListViewItem | undefined) => void;
    value?: string;
}

export const AdjustmentsFileUsersSelect: React.FC<
    AdjustmentsFileUsersSelectPropTypes
> = ({
    action,
    className = '',
    compact = false,
    isDisabled = false,
    fieldTextMaxWidth,
    menuMaxWidth,
    onChange,
    value,
}) => {
    const [users, setUsers] = useState<ListViewItem[]>([]);
    const { data, loading } = useStatementPeriodAdjustmentFilesUsers(action);

    useEffect(() => {
        if (data) {
            const {
                abacusStatementPeriodAdjustmentFileUsers,
            }: GetStatementPeriodAdjustmentFileUsersQuery = data;
            if (abacusStatementPeriodAdjustmentFileUsers) {
                const options: ListViewItem[] = [];

                abacusStatementPeriodAdjustmentFileUsers?.items?.forEach(
                    (fileUser: AbacusStatementPeriodAdjustmentFileUser) => {
                        options.push({
                            label: fileUser.name!,
                            value:
                                'id' in fileUser ? fileUser.id : fileUser.name!,
                        });
                    }
                );
                options.sort((a, b) => a.label!.localeCompare(b.label!));
                setUsers(options);
            }
        }
    }, [data, loading]);

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

export default AdjustmentsFileUsersSelect;