import { useField, useFormikContext } from "formik";
import React, { useState } from "react";

import { Form, Image, InputGroup } from "react-bootstrap";
interface CxInputProps {
  label: string;
  name: string;
  className?: string;
  type?: "text" | "number" | "email" | "password";
  placeholder?: string;
  asInput?: string;
  isDisabled?: boolean;
  required?: boolean;
  contClassName?: string;
  labelStyle?: React.CSSProperties;
  rows?: number;
  maxLength?: number;
}
// interface CxCheckboxProps {
//   id: string;
//   name: string;
//   label: string;
//   className?: string;
//   isDisabled?: boolean;

//   onChange?: (checked: boolean) => void;
// }

export const CxTextInput = ({
  name,
  type = "text",
  label,
  className,
  contClassName = "",
  // asInput = "input",
  isDisabled = false,
  required = false,
  labelStyle = {},
  placeholder = "",
  maxLength = 300
}: CxInputProps): React.ReactNode => {
  const { handleChange } = useFormikContext();
  const [field, meta] = useField(name);

  return (
    <>
      <Form.Group className={`form-group ${contClassName}`} controlId={name}>
        <label style={labelStyle ?? {}}>
          {label}
          {required && <span className="text-danger">*</span>}
        </label>
        <Form.Control
          type={type}
          className={className || ""}
          placeholder={placeholder}
          // required={required}
          disabled={isDisabled}
          name={name}
          value={field.value}
          onChange={handleChange}
          maxLength={maxLength}
        />
      </Form.Group>
      {meta.touched && meta.error && (
        <span className="text-danger">{meta.error}</span>
      )}
    </>
  );
};

export const CxPassword = ({
  name,
  label,
  className,
  contClassName = "",
  isDisabled = false,
  required = false,
  placeholder = "",
  labelStyle = {}
}: CxInputProps): React.ReactNode => {
  const { handleChange } = useFormikContext();
  const [field, meta] = useField(name);
  const [passwordVisible, setPasswordVisible] = useState(false);
  const togglePasswordVisibility = () => {
    setPasswordVisible(prevState => !prevState);
  };

  return (
    <>
      <Form.Group className={`form-group ${contClassName}`} controlId={name}>
        <label style={labelStyle ?? {}}>
          {label}
          {required && <span className="text-danger">*</span>}
        </label>
        <InputGroup>
          <Form.Control
            type={passwordVisible ? "text" : "password"}
            className={className || ""}
            placeholder={placeholder}
            // required={required}
            disabled={isDisabled}
            name={name}
            value={field.value}
            onChange={handleChange}
          />
          <InputGroup.Text
            onClick={togglePasswordVisibility}
            style={{ cursor: "pointer" }}
            className="eyeIcon"
          >
            {passwordVisible ? (
              <Image src="/assets/eye-on.svg" alt="eye-on" />
            ) : (
              <Image src="/assets/eye.svg" alt="eye" />
            )}
          </InputGroup.Text>
        </InputGroup>
      </Form.Group>
      {meta.touched && meta.error && (
        <span className="text-danger">{meta.error}</span>
      )}
    </>
  );
};
// export const CxCheckbox = ({
//   id,
//   name,
//   label,
//   onChange,
//   isDisabled = false
// }: CxCheckboxProps): React.ReactNode => {
//   const [field, { error }, helper] = useField(name);

//   return (
//     <Box>
//       <FormControl>
//         <FormControlLabel
//           id={id}
//           control={
//             <Checkbox
//               name={name}
//               value={field.value}
//               checked={field.value}
//               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
//                 helper.setValue(e.target.checked);
//                 onChange && onChange(e.target.checked);
//               }}
//             />
//           }
//           name={name}
//           checked={field.value}
//           label={label}
//           disabled={isDisabled}
//         />
//         {error && (
//           <FormHelperText sx={{ ml: 0 }} error>
//             {error}
//           </FormHelperText>
//         )}
//       </FormControl>
//     </Box>
//   );
// };

export const CxTextArea = ({
  name,
  type = "text",
  label,
  className,
  contClassName = "",
  // asInput = "input",
  isDisabled = false,
  required = false,
  labelStyle = {},
  placeholder = "",
  rows = 4,
  maxLength = 600
}: CxInputProps): React.ReactNode => {
  // const { handleChange } = useFormikContext();
  const [field, meta] = useField(name);

  return (
    <>
      <Form.Group className={`form-group ${contClassName}`} controlId={name}>
        <label style={labelStyle ?? {}}>
          {label}
          {required && <span className="text-danger">*</span>}
        </label>
        <Form.Control
          type={type}
          as="textarea"
          className={className || ""}
          placeholder={placeholder}
          // required={required}
          disabled={isDisabled}
          name={name}
          value={field.value}
          onChange={field.onChange}
          rows={rows}
          maxLength={maxLength}
        />
      </Form.Group>
      {meta.touched && meta.error && (
        <span className="text-danger">{meta.error}</span>
      )}
    </>
  );
};

export const CxSelectDropdown = ({
  name,
  label,
  options = [],
  className = "",
  contClassName = "",
  isDisabled = false,
  required = false,
  labelStyle = {},
  defaultOptionLabel = "Select an option"
}: {
  name: string;
  label: string;
  options: { title: string; value: string | number }[]; // Array of option objects
  className?: string;
  contClassName?: string;
  isDisabled?: boolean;
  required?: boolean;
  labelStyle?: React.CSSProperties;
  defaultOptionLabel?: string;
}): React.ReactNode => {
  const { handleChange } = useFormikContext();
  const [field, meta] = useField(name);

  return (
    <>
      <Form.Group className={`form-group ${contClassName}`} controlId={name}>
        <label style={labelStyle}>
          {label}
          {required && <span className="text-danger">*</span>}
        </label>
        <Form.Select
          {...field} // Binds Formik's field values and onChange
          className={className}
          disabled={isDisabled}
          onChange={handleChange} // Use Formik's handleChange
          value={field.value || ""}
        >
          <option value="">{defaultOptionLabel}</option>
          {options.map((option, index) => (
            <option key={index} value={option.value}>
              {option.title}
            </option>
          ))}
        </Form.Select>
      </Form.Group>
      {meta.touched && meta.error && (
        <span className="text-danger">{meta.error}</span>
      )}
    </>
  );
};