---

import { ModelSelect } from '@/features/Settings/selects';
import { LocationFilters } from '@/features/filters/LocationFilters/LocationFilters';
import { AppConsts } from '@/shared';
import {
  Button,
  Column,
  DateTimeField,
  IconButton,
  IpInput,
  Row,
  Select,
  TextField,
  Typography,
} from '@/shared/components';
import { SearchSelect } from '@/shared/components/SearchSelect';
import { InputMask } from '@/shared/lib/InputMask';
import { ChevronsDownIcon, ChevronsUpIcon } from '@sber-friend/flamingo-icons';
import { useTranslation } from 'react-i18next';
import { useAuditSideFilter } from '../controller';

export const UsersAuditSideFilter = () => {
  const { t } = useTranslation('common');

  const {
    searchParams,
    isFetchingUsers,
    userOptions,
    typeOptions,
    smartRoomId,
    smartRoomIdError,
    modelIds,
    macValue,
    ipValue,
    cityId,
    floorId,
    placeId,
    regionId,
    roomId,
    isEquipmentFiltersOpen,
    isEquipmentFiltersAvailable,
    equipmentModelType,
    setSearchUser,
    resetFilters,
    refetchQuery,
    handleChangeTimeFrom,
    handleChange,
    handleChangeTimeMax,
    handleChangeUser,
    handleSmartRoomIdChange,
    handleEquipmentFiltersToggle,
    handleChangeModels,
    handleMacChange,
    handleIpChange,
    setRegionId,
    setCityId,
    setPlaceId,
    setFloorId,
    setRoomId,
  } = useAuditSideFilter();

  return (
    <Column minWidth={330} maxWidth={330} gridGap={16}>
      <DateTimeField
        label={t('timeFrom')}
        onChange={handleChangeTimeFrom}
        margin='none'
        value={searchParams.tmMin && searchParams.tmMin * AppConsts.THOUSAND}
      />

      <DateTimeField
        label={t('timeTo')}
        margin='none'
        onChange={handleChangeTimeMax}
        value={searchParams.tmMax && searchParams.tmMax * AppConsts.THOUSAND}
      />

      <Select
        label={t('type')}
        onChange={handleChange('type')}
        options={typeOptions}
        value={searchParams.type}
      />

      <SearchSelect
        label={t('user')}
        placeholder={t('user:placeholders.searchByFullName')}
        loading={isFetchingUsers}
        value={searchParams?.userId || ''}
        setValue={setSearchUser}
        options={userOptions}
        onChangeCallback={handleChangeUser}
      />

      <Select
        label={t('source')}
        onChange={handleChange('source')}
        value={searchParams.source}
        options={[
          { label: t('all'), value: undefined },
          { label: t('monitoring'), value: 'smartroom-monitoring' },
          { label: t('authentication'), value: 'smartroom-auth' },
          {
            label: t('notifications:notifications'),
            value: 'smartroom-notifications',
          },
        ]}
      />

      <TextField
        label='Smartroom ID'
        value={smartRoomId}
        onChange={handleSmartRoomIdChange}
        error={smartRoomIdError}
        helperText={smartRoomIdError ? t('messages.invalidUUIDMessage') : ''}
      />

      {isEquipmentFiltersAvailable && (
        <>
          <Row justifyContent='space-between'>
            <Typography variant='h5'>Фильтры по оборудованию</Typography>
            <IconButton onClick={handleEquipmentFiltersToggle}>
              {isEquipmentFiltersOpen ? (
                <ChevronsUpIcon />
              ) : (
                <ChevronsDownIcon />
              )}
            </IconButton>
          </Row>

          {isEquipmentFiltersOpen && equipmentModelType && (
            <Column gridGap={16}>
              <Typography variant='h5'>Локация</Typography>
              <LocationFilters
                isRooms
                regionId={regionId}
                setRegionId={setRegionId}
                cityId={cityId}
                setCityId={setCityId}
                placeId={placeId}
                setPlaceId={setPlaceId}
                floorId={floorId}
                setFloorId={setFloorId}
                roomId={roomId}
                setRoomId={setRoomId}
                withDropdown={false}
                onLocationIdsChange={() => {}}
              />

              <Typography variant='h5'>Другое</Typography>
              <ModelSelect
                multiple
                isCreateButton={false}
                type={equipmentModelType}
                value={modelIds}
                onChange={handleChangeModels}
              />

              <TextField
                fullWidth
                label='MAC'
                mask={InputMask.mac}
                value={macValue}
                onChange={handleMacChange}
              />

              <IpInput
                label='ip'
                value={ipValue}
                onChange={handleIpChange}
                error={false}
                helperText={undefined}
              />
            </Column>
          )}
        </>
      )}

      <Column gridGap={8}>
        <Button onClick={refetchQuery} color='primary'>
          {t('buttons.update')}
        </Button>
        <Button onClick={resetFilters} color='error'>
          {t('buttons.reset')}
        </Button>
      </Column>
    </Column>
  );
};