import {
  Box,
  TextField,
  Autocomplete,
  FormLabel,
  Paper,
  Stack,
} from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { styled } from '@mui/material';
import SearchComponent from '../../../../components/common/SearchComponent';
import { DefaultOutlinedButton } from '../../../../components/common/Buttons/Buttons';
import FilterFieldWrapper from './FilterFieldWrapper';

const FormLabelStyled = styled(FormLabel)`
  color: #4a5565;
  font-size: 0.75rem;
  font-weight: 400;
`;

const AutocompleteStyled = styled(Autocomplete)`
  & .MuiOutlinedInput-root {
    background-color: white;
    height: 2.56rem;
    padding: 0;

    & input {
      padding: 0.5rem 0.75rem;
      height: 1.5rem;
    }

    & fieldset {
      border-radius: 0.63rem;
    }
    & .MuiOutlinedInput-notchedOutline {
      border-radius: 0.63rem;
      border: 0.53px solid #d1d5db;
    }
  }
`;

const DatePickerStyled = styled(DatePicker)`
  width: 100%;

  & .MuiPickersSectionList-root {
    height: 2.56rem;
    padding: 0.625rem;
  }

  & .MuiPickersInputBase-root {
    border-radius: 0.63rem;
    background-color: white;
    width: 100%;
  }

  & .MuiInputBase-root {
    height: 2.56rem;
    width: 100%;
  }

  & .MuiPickersOutlinedInput-notchedOutline,
  .MuiPickersOutlinedInput-notchedOutline:hover,
  .MuiPickersOutlinedInput-notchedOutline:active {
    border-radius: 0.63rem;
    border: 0.53px solid #d1d5db;
  }
`;

const AuditLogsFilters = ({
  users,
  ssps,
  eventTypes,
  selectedUser,
  selectedSsp,
  selectedEventType,
  dateFrom,
  dateTo,
  taskId,
  formId,
  onUserChange,
  onSspChange,
  onEventTypeChange,
  onDateFromChange,
  onDateToChange,
  onTaskIdChange,
  onFormIdChange,
  onResetFilters,
}) => {
  return (
    <Paper
      sx={{
        p: '1.5rem',
        borderRadius: '.63rem',
        border: '0.53px solid #e5e7eb',
        backgroundColor: '#F9FAFB',
        boxShadow: 'none',
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
      }}
    >
      <Stack direction={'row'} spacing={'1rem'} sx={{ width: '100%' }}>
        <FilterFieldWrapper sx={{ flex: 1 }}>
          <FormLabelStyled>Пользователь</FormLabelStyled>
          <AutocompleteStyled
            size="small"
            options={users}
            noOptionsText="Не найдено"
            getOptionLabel={(option) => option.full_name || option.email || ''}
            value={selectedUser}
            onChange={(event, newValue) => onUserChange(newValue)}
            renderInput={(params) => (
              <TextField {...params} placeholder="Все пользователи" />
            )}
          />
        </FilterFieldWrapper>

        <FilterFieldWrapper sx={{ flex: 1 }}>
          <FormLabelStyled>ССП/Региональные филиалы</FormLabelStyled>
          <AutocompleteStyled
            size="small"
            options={ssps}
            noOptionsText="Не найдено"
            getOptionLabel={(option) => option.title || option.name || ''}
            value={selectedSsp}
            onChange={(event, newValue) => onSspChange(newValue)}
            renderInput={(params) => (
              <TextField {...params} placeholder="Все ССП" />
            )}
          />
        </FilterFieldWrapper>

        <FilterFieldWrapper sx={{ flex: 1 }}>
          <FormLabelStyled>Тип события</FormLabelStyled>
          <AutocompleteStyled
            size="small"
            options={eventTypes}
            noOptionsText="Не найдено"
            getOptionLabel={(option) => option.name}
            value={selectedEventType}
            onChange={(event, newValue) => onEventTypeChange(newValue)}
            renderInput={(params) => (
              <TextField {...params} placeholder="Все события" />
            )}
          />
        </FilterFieldWrapper>

        <FilterFieldWrapper sx={{ flex: 1 }}>
          <FormLabelStyled>Дата начала</FormLabelStyled>
          <DatePickerStyled
            format="dd.MM.yyyy"
            value={dateFrom}
            onChange={(newValue) => onDateFromChange(newValue)}
            slotProps={{
              field: { clearable: true },
              textField: { size: 'small', sx: { width: '100%' } },
            }}
          />
        </FilterFieldWrapper>

        <FilterFieldWrapper sx={{ flex: 1 }}>
          <FormLabelStyled>Дата окончания</FormLabelStyled>
          <DatePickerStyled
            format="dd.MM.yyyy"
            value={dateTo}
            onChange={(newValue) => onDateToChange(newValue)}
            slotProps={{
              field: { clearable: true },
              textField: { size: 'small', sx: { width: '100%' } },
            }}
          />
        </FilterFieldWrapper>
      </Stack>

      <Stack
        direction={'row'}
        spacing={'1rem'}
        sx={{ width: '100%', alignItems: 'end' }}
      >

        <DefaultOutlinedButton
          onClick={onResetFilters}
          height={'2.56rem'}
          sx={{ flex: '0 0 auto' }}
        >
          Сбросить фильтры
        </DefaultOutlinedButton>
      </Stack>
    </Paper>
  );
};

export default AuditLogsFilters;
