import React from 'react';
import { Label } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { StatementPeriodAdjustmentFileUserActions } from 'src/apollo/definitions/globalTypes';
import { useAdjustmentFilesSearchFilters } from 'src/apollo/queries/adjustment';
import { AdjustmentsFileNameSearchSelect } from 'src/components/adjustments/adjustments-file-name-search-select';
import { AdjustmentsFileUsersSelect } from 'src/components/adjustments/adjustments-file-users-select';
import { AdjustmentFileStatusSelect } from 'src/components/shared/adjustment-file-status-select';
import { AdjustmentFileStatusMultiSelect } from 'src/components/adjustments/adjustment-file-status-multiselect';
import { SearchField } from 'src/components/shared/search-field';
import { StatementPeriodDropdown } from 'src/components/shared/statement-period-dropdown';
import { USER_FEATURES } from 'src/constants';
import { isFeatureFlagEnabled } from 'src/utils/feature-flag';
import type { ListViewItem } from '@theorchard/suite-components';
import type { AdjustmentFilter } from 'src/types/adjustment-file';

export interface AdjustmentsFiltersPropTypes {
    changeHandler: (fieldName: string, value: string) => void;
    clearBatchIdSearchField: boolean;
    requestParams: AdjustmentFilter;
    setRequestParams: (params: AdjustmentFilter) => void;
}

export const AdjustmentsFilters: React.FC<AdjustmentsFiltersPropTypes> = ({
    changeHandler,
    clearBatchIdSearchField,
    requestParams,
    setRequestParams,
}) => {
    const getPromisedAdjustmentFilesSearch = useAdjustmentFilesSearchFilters();
    const setChangeHandler = (value: string) =>
        changeHandler('statementPeriodAdjustmentFileId', value);

    const isAutoGenerateEnabled = isFeatureFlagEnabled(
        USER_FEATURES.ABACUS_AUTO_GENERATE_ADJUSTMENTS_FLOWTHROUGH
    );
    return (
        <Page.Toolbar>
            <div className="BatchIdFilter">
                <Label text="Batch ID" />
                <SearchField
                    placeholder="Filter by Batch ID"
                    onHandleChange={setChangeHandler}
                    searchInputName="statementPeriodAdjustmentFileId"
                    states={requestParams}
                    setStates={setRequestParams}
                    clearSearchField={clearBatchIdSearchField}
                    validatePattern={/^[0-9\b]+$/}
                    value={
                        requestParams?.statementPeriodAdjustmentFileId?.toString() ||
                        null
                    }
                />
            </div>
            {isAutoGenerateEnabled ? (
                <div className="FileStatusFilter">
                    <AdjustmentFileStatusMultiSelect
                        compact={true}
                        onChange={(e: any) =>
                            changeHandler(
                                'statementPeriodAdjustmentFileStatus',
                                e && e.map(({ value }: any) => value)
                            )
                        }
                        value={
                            requestParams?.statementPeriodAdjustmentFileStatus
                        }
                    />
                </div>
            ) : (
                <div className="StatusFilter">
                    <Label text="Status" />
                    <AdjustmentFileStatusSelect
                        isClearable={true}
                        isMultiSelect={true}
                        id="statementPeriodAdjustmentFileStatus"
                        name="statementPeriodAdjustmentFileStatus"
                        onChange={(e: any) =>
                            changeHandler(
                                'statementPeriodAdjustmentFileStatus',
                                e && e.map(({ value }: any) => value)
                            )
                        }
                        placeholder="All"
                        value={
                            requestParams?.statementPeriodAdjustmentFileStatus
                        }
                    />
                </div>
            )}

            <div className="FileNameFilter">
                <AdjustmentsFileNameSearchSelect
                    fieldTextMaxWidth={200}
                    getPromisedAdjustmentFilesSearch={
                        getPromisedAdjustmentFilesSearch
                    }
                    menuMaxWidth={350}
                    onChange={(e: ListViewItem | undefined) =>
                        changeHandler('fileName', (e && e.value) || '')
                    }
                    truncatedTextMaxWidth={300}
                    value={requestParams?.fileName || ''}
                />
            </div>
            <div className="StatementPeriodFilter">
                <StatementPeriodDropdown
                    compact={true}
                    fieldTextMaxWidth={250}
                    onChange={(e: ListViewItem | undefined) =>
                        changeHandler('statementPeriodId', (e && e.value) || '')
                    }
                    value={requestParams?.statementPeriodId || ''}
                />
            </div>
            <div className="AddedByFilter">
                <AdjustmentsFileUsersSelect
                    action={
                        StatementPeriodAdjustmentFileUserActions.UPLOADED_FILE
                    }
                    fieldTextMaxWidth={200}
                    compact={true}
                    onChange={(e: ListViewItem | undefined) =>
                        changeHandler('createdBy', (e && e.value) || '')
                    }
                    value={requestParams?.createdBy || ''}
                />
            </div>
        </Page.Toolbar>
    );
};