import { memo } from "react";
import DashboardSearchInput from "../dashboard-search-input/dashboard-search-input";
import { AdvancedDateFilterValues } from "../advanced-date-filter/schemas/advanced-date-filter.schema";
import ShowFilterButton from "../show-filter-button/show-filter-button";
import AdvancedDateFilter from "../advanced-date-filter";
import FilterDateGroup from "../advanced-filter/filter-date-group";
import FilterAmountGroup from "../advanced-filter/filter-amount-group";

type TSearchWithFiltersProps = {
	handleShowFilter?: () => void;
	showFilter?: boolean;
	showFilterIcon?: boolean;
	searchValue: string;
	onChange: (value: string) => void;
	placeholder: string;
	onSubmit: (values: AdvancedDateFilterValues) => void;
};

const SearchWithFilters = ({
	handleShowFilter,
	showFilter,
	showFilterIcon = true,
	searchValue,
	onChange,
	placeholder,
	onSubmit,
}: TSearchWithFiltersProps) => {
	return (
		<>
			<div className='grid-container'>
				<div className='col-span-12 md:col-span-6 lg:col-span-4'>
					<DashboardSearchInput
						searchValue={searchValue}
						onChange={onChange}
						placeholder={placeholder}
					/>
				</div>
				<div className='col-span-12 md:col-span-3 lg:col-span-3'>
					{showFilterIcon && (
						<ShowFilterButton
							showFilter={showFilter}
							onClick={handleShowFilter}
						/>
					)}
				</div>
			</div>
			{showFilter && (
				<div className='col-span-12'>
					<AdvancedDateFilter onSubmit={onSubmit}>
						<FilterDateGroup
							title='Date Range'
							fieldName='dateRange'
						/>
						<FilterDateGroup
							title='Created At'
							fieldName='createdAt'
						/>
						<FilterAmountGroup title='Amount' fieldName='amount' />
					</AdvancedDateFilter>
				</div>
			)}
		</>
	);
};

export default memo(SearchWithFilters);