import React from "react";

// Lirary components
import { Field } from "formik";
import styled from "@emotion/styled";
import { FormControl, InputBase, InputLabel, Box, FormHelperText } from "@mui/material";

// Icons
import { OverlayTooltip } from "components";

export const BootstrapInput = styled(InputBase)(({ theme, disabled }) => ({
  "label + &": {
    marginTop: theme.spacing(3),
  },
  "& .MuiInputBase-input": {
    borderRadius: 4,
    position: "relative",
    backgroundColor: disabled ? "#efefef4d" : "#fcfcfb",
    border: "1px solid #ced4da",
    fontSize: 16,
    // width: "auto",
    padding: "10px 12px",
    transition: theme?.transitions?.create(["border-color", "background-color", "box-shadow"]),
    marginRight: "0px !important",
    "& input:invalid": {
      borderColor: "red",
      borderWidth: 2,
    },
  },
}));

const FormTextField = ({
  md,
  label,
  name,
  type,
  value,
  isRequired = false,
  isRequiredSign = false,
  formGroupClass = "",
  inputClass = "",
  labelClass = "",
  helpTextClass = "",
  showHelpIcon = false,
  helpText = "",
  placeholder = "",
  fromHeight = "",
  showHelpText = true,
  accept,
  onBlur = () => {},
  ...props
}) => {
  return (
    <Field name={name}>
      {({ field, form }) => {
        const isInvalid = form.errors[name];

        return (
          <FormControl
            variant="standard"
            md={md}
            fullWidth
            sx={{
              width: "100%",
            }}
            className={formGroupClass}
          >
            <InputLabel
              shrink
              sx={{
                position: "static",
                whiteSpace: "initial",
                fontSize: "20px",
                color: "#000",
              }}
              className={`labelClass ${fromHeight}`}
            >
              {label}
              {(isRequired || isRequiredSign) && (
                <Box component="span" sx={{ fontSize: "24px" }} className="colorRed">
                  *
                </Box>
              )}
              {showHelpIcon && <OverlayTooltip helpText={helpText} iconClass={"height20 marginLeft5"} />}
            </InputLabel>

            <Box
              sx={{
                width: "100%!important",
              }}
            >
              <BootstrapInput
                {...field}
                inputProps={{ maxLength: props?.maxLength, ...(accept ? { accept } : {}) }}
                type={type}
                value={value}
                className={inputClass}
                required={isRequired}
                fullWidth
                placeholder={placeholder}
                onBlur={onBlur}
                onKeyDownCapture={() => form.setFieldError(name, "")}
                sx={{
                  width: "100%!important",
                  "& input": {
                    width: "100% !important",
                    borderColor: isInvalid && showHelpText ? "#A80000 !important" : "theme?.palette?.primary?.main",
                  },
                }}
                {...props}
              />
              {showHelpText && (
                <FormHelperText
                  sx={{
                    color: "#A80000",
                  }}
                  className={helpTextClass}
                >
                  {form.errors[field.name]}
                </FormHelperText>
              )}
            </Box>
          </FormControl>
        );
      }}
    </Field>
  );
};

export const TextField = ({
  type,
  name,
  value,
  isRequired = false,
  form,
  field,
  showHelpText = true,
  placeholder,
  isInvalid = false,
  width,
  onBlur,
  inputClass = "",
  helpTextClass = "",
  ...props
}) => {
  return (
    <Box
      sx={
        {
          // width: "100%!important",
          // width: width || "100% !important",
        }
      }
    >
      <BootstrapInput
        // inputProps={{
        //   maxLength: props?.maxLength,
        // }}
        type={type}
        value={value}
        className={inputClass}
        required={isRequired}
        fullWidth
        placeholder={placeholder}
        onBlur={onBlur}
        // onKeyDownCapture={() => form.setFieldError(name, "")}
        sx={{
          width: width || "100% !important",
          // "& input": {
          //   width: "100% !important",
          //   borderColor: isInvalid && showHelpText ? "red !important" : "theme?.palette?.primary?.main",
          // },
        }}
        {...props}
      />
    </Box>
  );
};

FormTextField.defaultProps = {
  type: "text",
  inputGroupPrepend: null,
};

export default FormTextField;

this is my component and using it in
<FormField
                label={t("bulk-upload")}
                type="file"
                name="file"
                inputProps={{
                  "aria-label": t("bulk-upload"),
                }}
                value={values?.file}
                labelClass={"fontSize20"}
                isRequired
                accept=".csv"
                onChange={(e) => {
                  setFile([...e.target.files]);
                }}
              />
i want to accept only .csv files