import React from "react";
import { FormElement } from "../formElement";
import { Input } from "../Input";
import { Button } from "../../Button";
import PropTypes from "prop-types";
import { Icon } from "../../Icon";
import styling from "@devcake/styling";
import { Color, ColorPropType, Type, TypePropType } from "../../types";

styling.link("components.password.icon.show", "components.icons.eye-off");
styling.link("components.password.icon.hide", "components.icons.eye");

export type PasswordProps = FormElement & {
  buttonType?: Type
  buttonColor?: Color
};

export const PasswordInput: React.FunctionComponent<PasswordProps> = ({
                                                                        buttonColor,
                                                                        buttonType,
                                                                        className,
                                                                        disabled,
                                                                        label,
                                                                        nullable,
                                                                        onChange,
                                                                        placeholder,
                                                                        validation,
                                                                        validationMessage,
                                                                        value
                                                                      }) => {
  const [hidden, setHidden] = React.useState<boolean>(true);
  const [innerValue, setInnerValue] = React.useState<string>("");
  const update = React.useCallback(value => {
    if (!nullable && value == null) value = "";
    setInnerValue(value);
    if (onChange) onChange(value);
  }, [setInnerValue, onChange, nullable]);
  React.useEffect(() => update(value), [update, value]);

  return (
    <Input
      className={className}
      disabled={disabled}
      inputType={hidden ? "password" : "text"}
      inset={(<div>
        <Button
          className="rounded-l-none"
          color={buttonColor}
          type={buttonType}
          onClick={() => setHidden(!hidden)}
        >
          <Icon className="h-5" icon={styling.get(`components.password.icon.${hidden ? "hide" : "show"}`)} />
        </Button>
      </div>)}
      label={label}
      nullable={nullable}
      onChange={update}
      placeholder={placeholder}
      validation={validation}
      validationMessage={validationMessage}
      value={innerValue}
    />
  );
};
PasswordInput.propTypes = {
  buttonColor: ColorPropType,
  buttonType: TypePropType,
  label: PropTypes.node,
  nullable: PropTypes.bool,
  value: PropTypes.string,
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
  className: PropTypes.string,
  placeholder: PropTypes.string,
  validation: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.instanceOf(RegExp)
  ]),
  validationMessage: PropTypes.string
};

PasswordInput.defaultProps = {
  buttonColor: "blue",
  buttonType: "secondary",
  disabled: false,
  nullable: true,
  onChange: () => null,
  validation: () => true,
  validationMessage: ""
};
