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 { styled } from '@mui/material/styles';
import { ROLES_ID_RUSSIAN_NAME } from '../../../constants';
import { UserIcon, TrashSvg } from '../../../components/common/icons/icons';
import {
  DangerOutlinedButton,
  PrimaryOutlinedButton,
} from '../../../components/common/Buttons/Buttons';

const HorizontalContainer = styled(Box)({
  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',
});

const StyledSelect = styled(Select)`
  width: 11rem;
  height: 1.5rem;
  background-color: white;

  & .MuiOutlinedInput-notchedOutline {
    border-color: #bedbff;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  &:hover .MuiOutlinedInput-notchedOutline {
    border-color: #4dabf5;
  }

  &.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #4dabf5;
  }
  .MuiSelect-select {
    padding: 0;
    padding-left: 0.75rem;
    display: flex;
    align-items: center;
    min-height: 1.5rem;
  }
`;

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 (
    <HorizontalContainer>
      <Box 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 fontSize=".88rem" color="#4a5565">
            Выбрано:
          </Typography>
          <Typography fontSize=".88rem" color="#323031">
            {countUser}
          </Typography>
        </Box>
      </Box>
      <Stack spacing={'.5rem'} direction={'row'}>
        <StyledSelect
          value={role || ''}
          onChange={handleRoleChange}
          displayEmpty
          inputProps={{ 'aria-label': 'Выберите роль' }}
        >
          <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>
          ))}
        </StyledSelect>

        <StyledSelect
          value={ssp || ''}
          onChange={handleSspChange}
          displayEmpty
          inputProps={{ 'aria-label': 'Выберите ССП' }}
        >
          <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>
          ))}
        </StyledSelect>
      </Stack>

      <Stack spacing={'.5rem'} direction={'row'}>
        <DangerOutlinedButton onClick={onDelete}>
          <Stack direction={'row'} spacing={'.5rem'} alignItems={'center'}>
            <p>Удалить</p>
          </Stack>
        </DangerOutlinedButton>

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

export default UsersActionBar;