"use client";

import React from "react";
import { Box, Typography } from "@mui/material";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";

function CustomDatePickerRange({
  item,
  filterParameters,
  defaultFilterTranslation,
  handleChange,
  errors,
}) {
  return (
    <Box sx={{ display: "flex", gap: 1 }}>
      <MuiDatePicker
        label={item.header}
        name={`${item.id}.value[0]`}
        value={filterParameters.value[0]}
        setFieldValue={(name, formattedDate) => {
          handleChange({
            ...filterParameters,
            value: [formattedDate, filterParameters.value[1]],
          });
        }}
        maxDate={filterParameters.value[1]}
        placeholder={`از تاریخ`}
        helperText={
          <Typography
            variant="button"
            sx={{ color: (theme) => theme.palette.primary.main }}
          >
            نوع فیلتر: {defaultFilterTranslation} (تاریخ)
          </Typography>
        }
      />
      <MuiDatePicker
        label={item.header}
        name={`${item.id}.value[1]`}
        value={filterParameters.value[1]}
        setFieldValue={(name, formattedDate) => {
          handleChange({
            ...filterParameters,
            value: [filterParameters.value[0], formattedDate],
          });
        }}
        minDate={filterParameters.value[0]}
        placeholder={`تا تاریخ`}
        helperText={
          errors?.[`${item.id}`]?.value
            ? errors?.[`${item.id}`]?.value.message
            : null
        }
        error={Boolean(errors?.[`${item.id}`]?.value)}
      />
    </Box>
  );
}

export default CustomDatePickerRange;
