import React from 'react';
import { Box, Typography, Slider } from '@mui/material';
import { useController, useFormContext } from 'react-hook-form';

export interface SliderFormFieldProps {
  name: string;
  label: string;
  min?: number;
  max?: number;
  step?: number;
  defaultValue?: number;
  valueLabelDisplay?: 'on' | 'auto' | 'off';
  marks?: boolean | Array<{ value: number; label?: string }>;
  disabled?: boolean;
  required?: boolean;
  sx?: object;
}

export const SliderFormField: React.FC<SliderFormFieldProps> = ({
  name,
  label,
  min = 0,
  max = 100,
  step = 1,
  defaultValue = 0,
  valueLabelDisplay = 'on',
  marks = false,
  disabled = false,
  required = false,
  sx = {},
}) => {
  const { control } = useFormContext();
  
  const {
    field,
    fieldState: { error },
  } = useController({
    name,
    control,
    defaultValue,
  });

  return (
    <Box sx={{ mb: 2, ...sx }}>
      <Typography 
        variant="subtitle1" 
        gutterBottom
        sx={{ 
          color: error ? 'error.main' : 'inherit',
          fontWeight: required ? 600 : 400,
        }}
      >
        {label}
        {required && <span style={{ color: 'red' }}> *</span>}
      </Typography>
      
      <Box sx={{ px: 2 }}>
        <Slider
          {...field}
          min={min}
          max={max}
          step={step}
          valueLabelDisplay={valueLabelDisplay}
          marks={marks}
          disabled={disabled}
          onChange={(_, value) => field.onChange(value)}
          sx={{
            color: error ? 'error.main' : 'primary.main',
          }}
        />
      </Box>
      
      {error && (
        <Typography 
          variant="caption" 
          color="error" 
          sx={{ mt: 0.5, display: 'block' }}
        >
          {error.message}
        </Typography>
      )}
    </Box>
  );
};

export default SliderFormField;