import React from 'react';
import { InputProps, ButtonProps } from '@bigbinary/neetoui';

interface InlineInputProps extends InputProps {
  className?: string;
  value?: string;
  nullable?: boolean;
  isSaving?: boolean;
  saveOnBlur?: boolean;
  clearOnSave?: boolean;
  submitButtonProps?: ButtonProps;
  cancelButtonProps?: ButtonProps;
  handleSubmit: (value: string) => void;
  handleCancel: (value: string) => void;
  size?: "small" | "medium" | "large";
}
interface FormikInlineInputProps extends InlineInputProps {
  name: string;
  handleSubmit?: (value: string) => void;
  handleCancel?: (value: string) => void;
}
/**
 *
 * An input field with built-in functionality for handling saving and cancelling
 *
 * actions via buttons, keypress and blur handlers.
 *
 * @example 
 *
 * import InlineInput from "@bigbinary/neeto-molecules/InlineInput";
 * 
 * const TaskInput = () => {
 *   const [taskName, setTaskName] = useState("Sample task");
 *   const [isEditorOpen, setIsEditorOpen] = useState(false);
 * 
 *   return (
 *     <div className="flex-grow">
 *       {isEditorOpen ? (
 *         <InlineInput
 *           handleCancel={() => setIsEditorOpen(false)}
 *           value={taskName}
 *           handleSubmit={value => {
 *             setTaskName(value);
 *             setIsEditorOpen(false);
 *           }}
 *         />
 *       ) : (
 *         <Typography
 *           className="flex-grow cursor-pointer"
 *           style="h2"
 *           weight="semibold"
 *           onClick={() => setIsEditorOpen(true)}
 *         >
 *           {taskName}
 *         </Typography>
 *       )}
 *     </div>
 *   );
 * };
 * @endexample
 * The InlineInput component wrapped in Formik.
 *
 * @example 
 *
 * import { FormikInlineInput } from "@bigbinary/neeto-molecules/InlineInput";
 * import { Form } from "@bigbinary/neetoui/formik";
 * 
 * const App = () => (
 *   return (
 *     <Form
 *       formikProps={{
 *         initialValues: { taskName: "task" },
 *         validationSchema: yup.object({ taskName: yup
 *         .string()
 *         .matches(/^[a-z]+$/, "All letters should be lowercase") }),
 *         onSubmit: handleSubmit,
 *       }}
 *     >
 *       <FormikInlineInput name="taskName" />
 *     </Form>
 *   );
 * );
 * @endexample
*/
declare const InlineInput: React.ForwardRefExoticComponent<InlineInputProps>;
declare const FormikInlineInput: React.ForwardRefExoticComponent<FormikInlineInputProps>;

export { FormikInlineInput, InlineInput };
export type { FormikInlineInputProps, InlineInputProps };