import React from 'react';
import {
    Label,
    MultiSelect,
    SearchInput,
    Select,
    Status,
} from '@theorchard/suite-components';
import StatementPeriodRangeSwitcher, {
    type StatementPeriodItem,
} from 'src/components/shared/statement-period-range-switcher/statement-period-range-switcher';
import {
    TRANSFER_STATUS_FILLED,
    TRANSFER_STATUS_LABEL,
    TRANSFER_STATUS_VARIANT,
} from './transfer-list-table-columns';
import type { ListViewItem } from '@theorchard/suite-components';
import type { ProjectTransferJobStatus } from 'src/apollo/queries/transfer-projects';

const STATUS_KEYS: ProjectTransferJobStatus[] = [
    'QUEUED',
    'PROCESSING',
    'COMPLETED',
    'FAILED',
    'DELETED',
];

const STATUS_OPTIONS: ListViewItem[] = STATUS_KEYS.map(key => ({
    label: TRANSFER_STATUS_LABEL[key],
    value: key,
    icon: (
        <Status
            variant={TRANSFER_STATUS_VARIANT[key]}
            filled={TRANSFER_STATUS_FILLED[key]}
            text=""
            size="small"
        />
    ),
}));

interface TransferFiltersProps {
    searchValue: string;
    statusValue: ListViewItem[];
    periods: StatementPeriodItem[];
    periodFrom: string;
    periodTo: string;
    accountValue: ListViewItem | undefined;
    onLoadAccountOptions: (
        term?: string
    ) => Promise<{ data: ListViewItem[]; totalCount: number }>;
    onSearchChange: (value: string) => void;
    onStatusChange: (value: ListViewItem[]) => void;
    onPeriodChange: (from: string, to: string) => void;
    onAccountChange: (item: ListViewItem | undefined) => void;
}

const TransferFilters: React.FC<TransferFiltersProps> = ({
    searchValue,
    statusValue,
    periods,
    periodFrom,
    periodTo,
    accountValue,
    onLoadAccountOptions,
    onSearchChange,
    onStatusChange,
    onPeriodChange,
    onAccountChange,
}) => (
    <div
        className="d-flex flex-wrap align-items-end w-100"
        style={{ gap: '20px' }}
    >
        <div className="d-flex flex-column">
            <Label text="Transfer ID" />
            <SearchInput
                placeholder="Filter by Transfer ID"
                value={searchValue || undefined}
                onChange={onSearchChange}
                expanded
            />
        </div>
        <MultiSelect
            variant="compact"
            options={STATUS_OPTIONS}
            selectedValue={statusValue.length ? statusValue : undefined}
            onChange={(items: ListViewItem[] | undefined) =>
                onStatusChange(items ?? [])
            }
            placeholder="Transfer Status"
            requireApply
        />
        <StatementPeriodRangeSwitcher
            periods={periods}
            fromValue={periodFrom}
            toValue={periodTo}
            onChange={onPeriodChange}
        />
        <Select
            compact
            id="transferAccount"
            onLoadOptions={onLoadAccountOptions}
            selectedValue={accountValue}
            onChange={(item: ListViewItem | undefined) => onAccountChange(item)}
            placeholder="Account Name & ID"
            filterPlaceholder="Search account"
            showSelectedSubtitle
        />
    </div>
);

export default TransferFilters;