import React, { useEffect, useState } from 'react';
import { Button, Label } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { SearchField } from 'src/components/shared/search-field';

export interface AccountFiltersPropTypes {
    changeHandler: any;
    clearFilters: any;
    filterValues: any;
    isFiltered: boolean | string;
    setFilterValues: any;
    hideClearFilterBtn?: boolean;
}

export const AccountFilters: React.FC<AccountFiltersPropTypes> = ({
    changeHandler,
    clearFilters,
    filterValues,
    isFiltered,
    setFilterValues,
    hideClearFilterBtn,
}) => {
    const [clearAccountSearchField, setClearAccountSearchField] =
        useState<boolean>(false);

    const setChangeHandler = (value: string) =>
        changeHandler({ target: { name: 'searchTerm', value } });

    const clearAllFilters = () => {
        clearFilters();
        setClearAccountSearchField(!clearAccountSearchField);
    };

    useEffect(() => {
        if (filterValues.searchTerm === '') {
            clearAllFilters();
        }
    }, [filterValues.searchTerm]);

    return (
        <Page.Toolbar>
            <div>
                <Label text="Account" />
                <SearchField
                    placeholder="Filter by Account Name or ID"
                    onHandleChange={setChangeHandler}
                    searchInputName="accountName"
                    states={filterValues}
                    setStates={setFilterValues}
                    clearSearchField={clearAccountSearchField}
                    validatePattern={null}
                    value={filterValues.searchTerm}
                />
            </div>

            <div className="ClearFilters">
                {isFiltered && !hideClearFilterBtn && (
                    <Button
                        className="ClearFilterButton"
                        onClick={() => clearAllFilters()}
                        variant="quartenary"
                    >
                        Clear Filters
                    </Button>
                )}
            </div>
        </Page.Toolbar>
    );
};

export default AccountFilters;