import { Box, InputAdornment, TextField, Typography } from "@mui/material";
import FilterListIcon from "@mui/icons-material/FilterList";

function CustomTextFieldRange({
  item,
  defaultFilterTranslation,
  handleOpenFilterBox,
  handleChange,
  filterParameters,
  handleBlur,
  errors,
}) {
  return (
    <Box sx={{ display: "flex" }}>
      <TextField
        id={`${item.id}.value[0]`}
        name={`${item.id}.value[0]`}
        onChange={(e) =>
          handleChange({
            ...filterParameters,
            value: [e.target.value, filterParameters.value[1]],
          })
        }
        onBlur={handleBlur}
        label={<Typography>از {item.header}</Typography>}
        value={filterParameters.value[0]}
        fullWidth
        error={
          touched?.[`${item.id}`]?.value &&
          Boolean(errors?.[`${item.id}`]?.value)
        }
        helperText={
          <Typography
            variant="caption"
            sx={{
              color: (theme) => theme.palette.primary.main,
              fontWeight: "bold",
            }}
          >
            نوع فیلتر: {defaultFilterTranslation}
          </Typography>
        }
        variant="outlined"
        size="small"
        sx={{ my: 1, marginRight: 1 }}
      />
      <TextField
        id={`${item.id}.value[1]`}
        name={`${item.id}.value[1]`}
        onChange={(e) =>
          handleChange({
            ...filterParameters,
            value: [filterParameters.value[0], e.target.value],
          })
        }
        onBlur={handleBlur}
        error={Boolean(errors?.[`${item.id}`]?.value)}
        helperText={
          errors?.[`${item.id}`]?.value
            ? errors?.[`${item.id}`]?.value.message
            : null
        }
        label={<Typography>تا {item.header}</Typography>}
        value={filterParameters.value[1]}
        fullWidth
        variant="outlined"
        size="small"
        sx={{ my: 1 }}
        InputProps={{
          endAdornment: (
            <InputAdornment
              position="end"
              sx={{ cursor: "pointer" }}
              onClick={handleOpenFilterBox}
            >
              <FilterListIcon />
            </InputAdornment>
          ),
        }}
      />
    </Box>
  );
}

export default CustomTextFieldRange;
