import React, { useMemo, useState } from 'react';
import { Select } from '@theorchard/suite-components';
import type { ListViewItem } from '@theorchard/suite-components';
import { useRunControllerList } from 'src/apollo/queries/run-controller';
import { GetRunControllersQuery } from 'src/apollo/queries/run-controller/__generated__/run-controller';

export type AbacusRunControllerItem = NonNullable<
    NonNullable<GetRunControllersQuery['abacusRunControllers']>['items']
>[number];

const SEARCH_PLACEHOLDER = 'Choose...';

export interface RunControllerDropdownPropTypes {
    accountId?: string;
    className?: string;
    compact?: boolean;
    contractType: string;
    isClearable?: boolean;
    isDisabled?: boolean;
    onChange: (e: ListViewItem | undefined) => void;
    placeholder?: string;
    testId?: string;
    value: string;
}

export const RunControllerDropdown: React.FC<
    RunControllerDropdownPropTypes
> = ({
    accountId,
    className = '',
    compact = false,
    contractType,
    isClearable = false,
    isDisabled = false,
    onChange,
    placeholder = SEARCH_PLACEHOLDER,
    value,
}) => {
    const [runControllersLimit, setRunControllersLimit] = useState<number>(100);

    const { data, loading } = useRunControllerList({
        limit: runControllersLimit,
        offset: 0,
        contractType,
        accountId,
    });

    const totalCount = data?.abacusRunControllers?.totalCount || 0;
    if (totalCount > runControllersLimit) {
        setRunControllersLimit(totalCount);
    }

    const runControllers = useMemo(() => {
        if (!contractType || !data?.abacusRunControllers?.items) {
            return [];
        }

        return data.abacusRunControllers.items
            .filter(
                (
                    row: AbacusRunControllerItem
                ): row is NonNullable<typeof row> => row !== null
            )
            .map(row => ({
                label: row.runControllerName ?? '',
                value:
                    row.runControllerId !== null
                        ? String(row.runControllerId)
                        : '',
            }));
    }, [data, contractType]);

    return (
        <Select
            className={`SelectType ${className}`}
            disabled={isDisabled || loading}
            hideClearButton={!isClearable}
            id="runControllerDropdown"
            onChange={onChange}
            options={runControllers}
            placeholder={placeholder}
            selectedValue={value || undefined}
            testId="runController"
            compact={compact}
        />
    );
};

export default RunControllerDropdown;