import { Box, TextField, Typography } from '@mui/material';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

// Стилевые компоненты
export const ModalContainer = ({ children, maxHeight = '60vh' }) => (
  <Box
    sx={{
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5rem',
      width: '100%',
      maxHeight: maxHeight,
      overflowY: 'auto',
      overflowX: 'hidden',
      paddingRight: '0.5rem',
      '& .fullWidth': {
        width: '100%',
      },
      '& .gray-color': { color: '#4A5565' },
      '&::-webkit-scrollbar': {
        width: '6px',
      },
      '&::-webkit-scrollbar-track': {
        background: '#f1f1f1',
        borderRadius: '3px',
      },
      '&::-webkit-scrollbar-thumb': {
        background: '#c1c1c1',
        borderRadius: '3px',
        '&:hover': {
          background: '#a8a8a8',
        },
      },
    }}
  >
    {children}
  </Box>
);

export const FieldContainer = ({ children }) => (
  <Box sx={{ width: '100%' }}>{children}</Box>
);

export const FieldLabel = ({ children }) => (
  <Typography
    className="gray-color"
    sx={{
      fontWeight: '400',
      fontSize: '0.75rem',
      color: 'var(--grey-dark)',
      paddingBottom: '.25rem',
    }}
  >
    {children}
  </Typography>
);

export const StyledTextField = ({ error, helperText, disabled, ...props }) => (
  <TextField
    className="fullWidth"
    size="small"
    error={!!error}
    helperText={helperText || error}
    disabled={disabled}
    sx={{
      width: '100%',
      '& .MuiInputBase-root': {
        height: '2.69rem',
      },
    }}
    {...props}
  />
);

export const StyledMultilineTextField = ({
  error,
  helperText,
  disabled,
  ...props
}) => (
  <TextField
    className="fullWidth"
    size="small"
    multiline
    rows={2}
    error={!!error}
    helperText={error || helperText}
    disabled={disabled}
    sx={{
      width: '100%',
      '& .MuiInputBase-root': {
        height: 'auto',
        minHeight: '2.69rem',
      },
    }}
    {...props}
  />
);

export const StyledDatePicker = ({
  value,
  onChange,
  disabled,
  error,
  helperText,
}) => (
  <DatePicker
    value={value}
    onChange={onChange}
    disabled={disabled}
    slotProps={{
      textField: {
        className: 'fullWidth',
        size: 'small',
        error: !!error,
        helperText: error || helperText,
        placeholder: 'Выберите дату',
        sx: {
          width: '100%',
          '& .MuiInputBase-root': {
            height: '2.69rem',
          },
        },
      },
      popper: {
        sx: {
          zIndex: 9999,
        },
      },
    }}
    format="dd.MM.yyyy"
  />
);
