text: import {
  	Box,
  	Field,
  	TextInput,
  	ButtonGroup,
  	Button,
  	Margins,
  	Tabs,
  	Flex,
  } from '@rocket.chat/fuselage';
  import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
  import React from 'react';
  
  import Page from '../../../client/components/Page';
  import { useTranslation } from '../../../client/contexts/TranslationContext';
  import DateRangePicker from './DateRangePicker';
  import Result from './Result';
  import ChannelTab from './Tabs/ChannelTab';
  import DirectTab from './Tabs/DirectTab';
  import UsersTab from './Tabs/UsersTab';
  import VisitorsTab from './Tabs/VisitorsTab';
  
  // TODO: create more stories for the tabs
  export const AuditPageBase = ({
  	type,
  	handleType,
  	msg,
  	handleMsg,
  	handleDateRange,
  	errors,
  	rid,
  	handleRid,
  	users,
  	handleUsers,
  	onChangeUsers,
  	visitor,
  	handleVisitor,
  	agent,
  	handleAgent,
  	apply,
  	setData,
  }) => {
  	const t = useTranslation();
  
  	const useHandleType = (type) =>
  		useMutableCallback(() => {
  			handleVisitor('');
  			handleAgent();
  			handleRid('');
  			handleUsers([]);
  			handleType(type);
  		});
  
  	return (
  		<Page>
  			<Page.Header title={t('Message_auditing')} />
  			<Tabs>
  				<Tabs.Item selected={type === ''} onClick={useHandleType('')}>
  					{t('Channels')}
  				</Tabs.Item>
  				<Tabs.Item selected={type === 'u'} onClick={useHandleType('u')}>
  					{t('Users')}
  				</Tabs.Item>
  				<Tabs.Item selected={type === 'd'} onClick={useHandleType('d')}>
  					{t('Direct_Messages')}
  				</Tabs.Item>
  				<Tabs.Item selected={type === 'l'} onClick={useHandleType('l')}>
  					{t('Omnichannel')}
  				</Tabs.Item>
  			</Tabs>
  			<Page.ScrollableContentWithShadow mb='neg-x4'>
  				<Margins block='x4'>
  					<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='stretch'>
  						<Margins inline='x4'>
  							<Flex.Item shrink={1}>
  								<Field>
  									<Field.Label>{t('Message')}</Field.Label>
  									<Field.Row>
  										<TextInput value={msg} onChange={handleMsg} placeholder={t('Search')} />
  									</Field.Row>
  								</Field>
  								<Field>
  									<Field.Label>{t('Date')}</Field.Label>
  									<Field.Row>
  										<DateRangePicker onChange={handleDateRange} display='flex' flexGrow={1} />
  									</Field.Row>
  								</Field>
  							</Flex.Item>
  						</Margins>
  					</Box>
  					<Box display='flex' flexDirection='row' alignItems='flex-end'>
  						<Flex.Item shrink={1}>
  							{type === '' && <ChannelTab errors={errors} rid={rid} handleRid={handleRid} />}
  							{type === 'u' && (
  								<UsersTab errors={errors} users={users} onChangeUsers={onChangeUsers} />
  							)}
  							{type === 'd' && <DirectTab />}
  							{type === 'l' && (
  								<VisitorsTab
  									errors={errors}
  									visitor={visitor}
  									handleVisitor={handleVisitor}
  									agent={agent}
  									handleAgent={handleAgent}
  								/>
  							)}
  							<ButtonGroup mis='x8' align='end'>
  								<Button primary onClick={apply}>
  									{t('Apply')}
  								</Button>
  							</ButtonGroup>
  						</Flex.Item>
  					</Box>
  					{setData && <Result setDataRef={setData} />}
  				</Margins>
  			</Page.ScrollableContentWithShadow>
  		</Page>
  	);
  };
  