import { useFormContext } from 'react-hook-form';

import { Box } from 'components/common';
import { Input } from 'components/inputs';
import { inputStyles } from './inputStyles';

export const RangeFilter = ({
  id,
  options = [],
}: {
  id: string;
  options: {
    min: number;
    max: number;
    placeholder?: string;
  }[];
}) => {
  const { register } = useFormContext();

  const [inputMin, inputMax] = options;
  return (
    <Box display="flex" paddingX={3}>
      <Input
        className="medium"
        style={{ ...inputStyles, borderRight: 0, borderRadius: '4px 0 0 4px' }}
        type="number"
        min={inputMin.min}
        max={inputMin.max}
        placeholder={'Min: ' + inputMin.min}
        title={inputMin.placeholder}
        {...register(id + '[0]')}
      />
      <Input
        className="medium"
        style={{ ...inputStyles, borderLeft: 0, borderRadius: '0 4px 4px 0' }}
        type="number"
        min={inputMax.min}
        max={inputMax.max}
        placeholder={'Max: ' + inputMax.max}
        title={inputMax.placeholder}
        {...register(id + '[1]')}
      />
    </Box>
  );
};