import { RefObject, useState } from 'react';

import { chakra, Group, Input } from '@chakra-ui/react';

import { FormGroup, FormGroupProps } from '@/components/form/FormGroup';
import { Button } from '../ui/button';
import { LuEye, LuEyeOff } from 'react-icons/lu';
import { useFormidableContextElement } from '../formidable';

export type FormInputProps = {
  name: string;
  ref?: RefObject<any>;
  label?: string;
  placeholder?: string;
  isRequired?: boolean;
} & Omit<FormGroupProps, 'children'>;

export const FormPassword = ({
  name,
  ref,
  placeholder,
  ...rest
}: FormInputProps) => {
  const {value, onChange} = useFormidableContextElement(name);
  const [showPassword, setShowPassword] = useState<boolean>(false);
  function toggleVisible(): void {
    setShowPassword((value) => ! value)
  }
  return (
    <FormGroup
      name={name}
      {...rest}
    >
      <chakra.div position="relative" width="full">
        <Input
          ref={ref}
          type={showPassword? "text" : "password"}
          name={name}
          autoComplete={name}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          paddingRight="47px"
        />
        <Button variant="ghost" onClick={toggleVisible} position="absolute" top="0" right="0" _hover={{bg:"#0000", shadow:"none", color:"black"}}>
          {showPassword? <LuEye/> : <LuEyeOff/>}
        </Button>
      </chakra.div>
    </FormGroup>
  );
};
