---

import { LocationFilters } from '@/features/filters/LocationFilters/LocationFilters';

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

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

  const {
    searchParams,
    isFetchingUsers,
    userOptions,
    typeOptions,
    smartRoomId,
    smartRoomIdError,
    modelIds,
    cityId,
    floorId,
    placeId,
    regionId,
    roomId,
    isLocationFiltersOpen,
    setSearchUser,
    resetFilters,
    refetchQuery,
    handleChangeTimeFrom,
    handleChange,
    handleChangeTimeMax,
    handleChangeUser,
    handleSmartRoomIdChange,
    handleLocationFiltersToggle,
    handleChangeModels,
    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}
      />

      <ModelSelect
        multiple
        isCreateButton={false}
        type={EquipmentModel.device}
        value={modelIds}
        onChange={handleChangeModels}
      />

      <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') : ''}
      />

      <Row justifyContent='space-between'>
        <Typography variant='h4'>Поиск локации</Typography>
        <IconButton onClick={handleLocationFiltersToggle}>
          {isLocationFiltersOpen ? <ChevronsUpIcon /> : <ChevronsDownIcon />}
        </IconButton>
      </Row>

      {isLocationFiltersOpen && (
        <Column gridGap={16}>
          <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={() => {}}
          />
        </Column>
      )}

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