import React, {
    type Dispatch,
    type SetStateAction,
    useState,
    useEffect,
} from 'react';
import { Checkbox, SearchInput } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { ReferenceSigningEntityMultiDropdown } from 'src/components/shared/reference-signing-entity-multi-dropdown';
import type { ReferenceSapProfitCenterFilter } from 'src/types/reference-sap-profit-center';
import './styles.scss';

export interface ReferenceSapProfitCentersFiltersPropTypes {
    changeHandler: (fieldName: string, value: string | boolean) => void;
    requestParams: ReferenceSapProfitCenterFilter;
    searchTerm: string | undefined;
    setSearchTerm: Dispatch<SetStateAction<string | undefined>>;
}

export const ReferenceSapProfitCentersFilters: React.FC<
    ReferenceSapProfitCentersFiltersPropTypes
> = ({ changeHandler, requestParams, searchTerm, setSearchTerm }) => {
    const [disableDropdown, setDisableDropdown] = useState<boolean>(false);

    useEffect(() => {
        setDisableDropdown(!!requestParams.orphan);
    }, [requestParams.orphan]);

    return (
        <Page.Toolbar>
            <div className="d-flex" style={{ gap: '20px' }}>
                <div className="SearchTermFilter">
                    <SearchInput
                        onChange={setSearchTerm}
                        placeholder="Filter by Display Name or Profit Center"
                        expanded
                        value={searchTerm || ''}
                        width={300}
                    />
                </div>
                <div className="SigningEntityFilter">
                    <ReferenceSigningEntityMultiDropdown
                        variant="compact"
                        id="signingEntity"
                        isDisabled={disableDropdown}
                        onChange={(e: any) =>
                            changeHandler(
                                'signingEntityIds',
                                e && e.map(({ value }: any) => value)
                            )
                        }
                        placeholder="Signing Entity"
                        value={
                            requestParams.signingEntityIds
                                ? requestParams.signingEntityIds.map(String)
                                : undefined
                        }
                        testId="signingEntityMultiSelect"
                    />
                </div>
                <div className="UnassignedSAPOnlyFilter">
                    <Checkbox
                        key="checkbox"
                        checked={!!requestParams.orphan}
                        onChange={() =>
                            changeHandler('orphan', !requestParams.orphan)
                        }
                        label="Show Unmapped Only"
                    />
                </div>
            </div>
        </Page.Toolbar>
    );
};

export default ReferenceSapProfitCentersFilters;