import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { useEffect } from 'react';
import { useTableContext } from './Tablev2.component';
import { SearchInput } from '../searchinput/SearchInput.component';
import { BasicText } from '../text/Text.component';
import { spacing } from '../../spacing';
const SearchContainer = styled.div `
  display: flex;
  align-items: center;
`;
const ResultContainer = styled(BasicText) `
  font-weight: bold;
`;
const translations = {
    en: {
        search: 'Search',
        total: 'Total: ',
    },
    fr: {
        search: `Rechercher`,
        total: `Total : `,
    },
};
const TableItemCountContainer = styled(BasicText) `
  display: flex;
  flex-direction: column;
  margin-right: ${spacing.r8};
  min-width: 4.3rem;
`;
export const TableItemCount = ({ entity, count, locale, }) => {
    return (_jsxs(TableItemCountContainer, { children: [_jsx("span", { children: translations[locale].total }), _jsxs(ResultContainer, { children: [count, ' ', count > 1
                        ? entity.plural
                        : (count === 1 || count === 0) && entity.singular] })] }));
};
export function TableSearch(props) {
    const { onChange, value = '', locale = 'en', totalCount, ...rest } = props;
    const { setGlobalFilter, rows, preGlobalFilteredRows, entityName = { en: { singular: 'result', plural: 'results' } }, } = useTableContext();
    const totalDispayedRows = totalCount ? totalCount : rows.length;
    useEffect(() => {
        setGlobalFilter(value);
    }, [value, setGlobalFilter, preGlobalFilteredRows]);
    return (_jsxs(SearchContainer, { children: [_jsx(TableItemCount, { entity: entityName[locale] || entityName.en, count: totalDispayedRows, locale: locale }), _jsx(SearchInput, { value: value, placeholder: translations[locale].search, size: "1", onChange: (evt) => {
                    if (typeof onChange === 'function') {
                        onChange(evt.target.value);
                    }
                }, ...rest })] }));
}
