import { useEffect, useState } from 'react';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import MenuItem from '@mui/material/MenuItem';
import { Button, Stack } from '@mui/material';
import Select from '@mui/material/Select';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { ROLES_ID_RUSSIAN_NAME } from '../../../constants/constants';
import { UserIcon, TrashSvg } from '../../../components/common/icons/icons';
import {
  DangerOutlinedButton,
  PrimaryOutlinedButton,
} from '../../../components/common/Buttons/Buttons';

function UsersActionBar({
  onClose,
  onDelete,
  onSave,
  countUser = 1,
  sspOptions = [],
}) {
  const [role, setRole] = useState(null);
  const [ssp, setSsp] = useState(null);
  const [roles, setRoles] = useState([]);

  useEffect(() => {
    setRoles(
      Object.entries(ROLES_ID_RUSSIAN_NAME).map(([idRole, name]) => ({
        id: idRole,
        name: name,
      })),
    );
  }, []);

  const handleRoleChange = (event) => {
    const selectedId = event.target.value;
    setRole(selectedId);
  };

  const handleSspChange = (event) => {
    const selectedId = event.target.value;
    setSsp(selectedId);
  };

  const handleSave = () => {
    if (onSave) {
      onSave({
        roleId: role ? parseInt(role) : null,
        sspId: ssp ? parseInt(ssp) : null,
      });
    }
    setRole(null);
    setSsp(null);
  };

  return (
    <Box
      sx={{
        border: '1px dashed #bedbff',
        borderRadius: '0.75rem',
        padding: '0.84rem 0.88rem 0.84rem 1.5rem',
        maxHeight: '3.19rem',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#e8f2ff',
        gap: '2.5rem',
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', gap: '1.5rem' }}>
        <IconButton
          onClick={onClose}
          aria-label="закрыть"
          sx={{
            width: '1rem',
            height: '1rem',
            color: '#4A5565',
            padding: 0,
            '&:hover': {
              backgroundColor: 'inherit',
              color: '#1976d2',
            },
          }}
        >
          <CloseIcon fontSize="small" />
        </IconButton>
        <Box
          sx={{
            display: 'flex',
            gap: '.5rem',
            height: '1.25rem',
            alignItems: 'center',
          }}
        >
          <UserIcon />
          <Typography sx={{ fontSize: '.88rem', color: '#4a5565' }}>
            Выбрано:
          </Typography>
          <Typography sx={{ fontSize: '.88rem', color: '#323031' }}>
            {countUser}
          </Typography>
        </Box>
      </Box>
      <Stack sx={{ gap: '.5rem', flexDirection: 'row' }}>
        <Select
          value={role || ''}
          onChange={handleRoleChange}
          displayEmpty
          inputProps={{ 'aria-label': 'Выберите роль' }}
          sx={{
            width: '11rem',
            height: '1.5rem',
            backgroundColor: 'white',
            '& .MuiOutlinedInput-notchedOutline': {
              borderColor: '#bedbff',
              borderRadius: '0.5rem',
              border: '1px solid rgba(0, 0, 0, 0.1)',
            },
            '&:hover .MuiOutlinedInput-notchedOutline': {
              borderColor: '#4dabf5',
            },
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              borderColor: '#4dabf5',
            },
            '& .MuiSelect-select': {
              padding: 0,
              paddingLeft: '0.75rem',
              display: 'flex',
              alignItems: 'center',
              minHeight: '1.5rem',
            },
          }}
        >
          <MenuItem value="" disabled>
            <Typography
              variant="body2"
              sx={{ color: 'text.disabled', fontSize: '0.81rem' }}
            >
              Выберите роль
            </Typography>
          </MenuItem>
          {roles.map((option) => (
            <MenuItem key={option.id} value={option.id}>
              <Typography variant="body2" sx={{ fontSize: '0.81rem' }}>
                {option.name}
              </Typography>
            </MenuItem>
          ))}
        </Select>

        <Select
          value={ssp || ''}
          onChange={handleSspChange}
          displayEmpty
          inputProps={{ 'aria-label': 'Выберите ССП' }}
          sx={{
            width: '11rem',
            height: '1.5rem',
            backgroundColor: 'white',
            '& .MuiOutlinedInput-notchedOutline': {
              borderColor: '#bedbff',
              borderRadius: '0.5rem',
              border: '1px solid rgba(0, 0, 0, 0.1)',
            },
            '&:hover .MuiOutlinedInput-notchedOutline': {
              borderColor: '#4dabf5',
            },
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              borderColor: '#4dabf5',
            },
            '& .MuiSelect-select': {
              padding: 0,
              paddingLeft: '0.75rem',
              display: 'flex',
              alignItems: 'center',
              minHeight: '1.5rem',
            },
          }}
        >
          <MenuItem value="" disabled>
            <Typography
              variant="body2"
              sx={{ color: 'text.disabled', fontSize: '0.81rem' }}
            >
              Выберите ССП
            </Typography>
          </MenuItem>
          {sspOptions.map((option) => (
            <MenuItem key={option.id} value={option.id}>
              <Typography variant="body2" sx={{ fontSize: '0.81rem' }}>
                {option.title || option.name}
              </Typography>
            </MenuItem>
          ))}
        </Select>
      </Stack>

      <Stack sx={{ gap: '.5rem', flexDirection: 'row' }}>
        <DangerOutlinedButton onClick={onDelete}>
          <Stack sx={{ flexDirection: 'row', gap: '.5rem', alignItems: 'center' }}>
            <p>Удалить</p>
          </Stack>
        </DangerOutlinedButton>

        <PrimaryOutlinedButton onClick={handleSave}>
          <p>Сохранить</p>
        </PrimaryOutlinedButton>
      </Stack>
    </Box>
  );
}

export default UsersActionBar;