import React, { ReactNode, useState, ChangeEvent, KeyboardEvent } from 'react';

import InputError from './InputError';
import { button } from '../configs/buttons';
import Button from '../Button/Button';

export interface TextInputProps {
  /**
   * Aria label for error messages if applicable
   */
  arialabel?: string | undefined;
  /**
   * If the input should allow autofilling from the browser. This is not always handled properly in Chrome, so we suggest to use a string like 'nope'.
   */
  autoComplete?: string;
  autoCorrect?: boolean;
  /**
   * The function to run when the input loses focus/blurred.
   */
  blurCallback?: (e: ChangeEvent<HTMLInputElement>, id: string) => void;
  /**
   * A function that will run after the input  has changed, it will return the value of the input for you to use in the parent component.
   */
  callback: (e: ChangeEvent<HTMLInputElement>, id?: string) => void;
  /**
   * Should the input be disabled or not. Use with a state var to determine when the input can be edited.
   */
  disabled?: boolean;
  /**
   * Pass a display method such as inline-block, inline, or bock.
   */
  display?: string;
  /**
   * An error message to be shown docked at the bottom of the input. If null, nothing will show.
   */
  error?: string;
  /**
   * An id to be added to the input itself, not the wrapping label.
   */
  id?: string;
  /**
   * Classes to be added to the input itself.
   */
  inputTheme?: string;
  /**
   * Callback when a key is released. To maintain typesafety, if accessing the element's value property, it is required to cast `event.target` as an `HTMLInputElement` in your function. For example: `alert((e.target as HTMLInputElement).value)`.
   */
  keyUpCallback?: (e: KeyboardEvent<HTMLInputElement>, id: string) => void;
  /**
   * Callback when key is down   */
  onKeyDownCallBack?: (e: KeyboardEvent<HTMLInputElement>, id: string) => void;
  /**
   * The allowed max length of characters into the input.
   */
  maxLength?: number;
  /**
   * The allowed min lenght of characters into the input.
   */
  minLength?: number;
  /**
   * If true, will show an (optional) tag next to the title. If false or not supplied, nothing will show.
   */
  name?: string;
  optional?: boolean;
  /**
   * Regex to match on the input.
   */
  pattern?: string;
  /**
   * Placeholder value to show on the input before any value is entered.
   */
  placeholder?: string;
  /**
   * The default value to be populated into the input on load.
   */
  populatedValue?: string;
  /**
   * If true, will show a required *'s. If false or not supplied, nothing will show.
   */
  required?: boolean;
  showPasswordLink?: boolean;
  /**
   * Size of the input, will effect length as how many chars will show
   */

  size?: number;
  /**
   * Classes to be added to the `<label>`.
   */
  labelTheme?: string;
  /**
   * Classes to be added to the `<div>`.
   */
  theme?: string;
  /**
   * The label text title of the input.
   */
  title: ReactNode;
  /**
   *
   */
  type?: string;
  /**
   * Classes to be added to the `<button>`.
   */
  buttonTheme?: string;
  /**
   * The roundedness of the button corners.
   */
  buttonRounded?: boolean;
  buttonSize?: keyof (typeof button)['size'];
  buttonVariant?: keyof (typeof button)['variant'];
  ariaDescribedby?: string;
  baseTheme?: string;
}

const TextInput = ({
  arialabel,
  ariaDescribedby,
  autoComplete = '',
  autoCorrect = false,
  blurCallback,
  callback,
  disabled = false,
  error = '',
  id = '',
  inputTheme,
  keyUpCallback,
  maxLength,
  minLength,
  optional = false,
  pattern,
  placeholder = '',
  populatedValue,
  required = false,
  size = 50,
  labelTheme,
  title = 'Input Name',
  type = 'text',
  theme = 'border-_-neutrals-400 hover:border-_-misc-selectedMedium active:border-_-misc-selectedDark focus-within:border-_-misc-selectedDark',
  name,
  showPasswordLink,
  buttonTheme,
  buttonRounded,
  buttonSize,
  buttonVariant = 'default',
  baseTheme = 'mb-8',
}: TextInputProps) => {
  const [inputType, inputTypeSetter] = useState(type);

  return (
    <section data-c="slmr--TextInput" className={` ${baseTheme} relative`}>
      <div className="w-full">
        <div
          className={`relative  hover:bg-white z-99 ${theme} border group ${
            error !== '' ? 'border-_-secondary-800' : ''
          }`}
        >
          <input
            autoComplete={autoComplete}
            autoCorrect={autoCorrect ? 'on' : 'off'}
            className={`peer inputClass bg-white placeholder-white active:border-none border-slate-300 h-11 px-2 focus:drop-shadow-lg focus:rounded-none focus:outline-none focus:border-black focus:ring-black w-full ${inputTheme} `}
            defaultValue={populatedValue}
            disabled={disabled}
            id={id}
            maxLength={maxLength}
            minLength={minLength}
            name={name || id}
            onBlur={(e) => blurCallback && blurCallback(e, id)}
            onChange={(e) => callback && callback(e, id)}
            onKeyUp={(e) => keyUpCallback && keyUpCallback(e, id)}
            pattern={pattern}
            size={size}
            type={inputType}
            aria-invalid={error !== null}
            aria-label={arialabel}
            aria-describedby={ariaDescribedby}
            required={required}
            placeholder={placeholder}
          />
          <label
            className={`transition-all absolute left-2 leading-tight -top-2 peer-placeholder-shown:top-3 bg-white font-bold text-xs peer-placeholder-shown:text-gray-600 peer-placeholder-shown:font-normal peer-placeholder-shown:text-[16px] group-focus-within:font-bold peer-focus-within:text-_-states-infoDark peer-focus-within:-top-2 peer-focus-within:font-bold peer-focus-within:text-xs ${
              title !== '' ? 'bg-white px-1' : ''
            } z-[999] ${labelTheme}`}
            htmlFor={id}
          >
            <span>{title}</span>
            <span>
              {required === true && (
                <sup
                  data-c="slmr--LabelOptional"
                  className={`text-_-secondary-800 font-bold`}
                >
                  {'*'}
                </sup>
              )}
              {optional === true && (
                <span className="text-xs text-_-neutrals-400 float-right relative top-[4px] ml-1">
                  {'(optional)'}
                </span>
              )}
            </span>
          </label>

          {type === 'password' && showPasswordLink && (
            <Button
              variant={buttonVariant}
              callback={() => {
                inputTypeSetter(inputType === 'password' ? 'text' : 'password');
              }}
              ariaControls={id}
              ariaExpanded={false}
              disabled={disabled}
              title={`${inputType === 'password' ? 'Show' : 'Hide'}`}
              rounded={buttonRounded}
              size={buttonSize}
              theme={`absolute top-[8px] right-0 bg-transparent border-none hover:bg-trasparent flex flex-col text-xs ml-auto float-right border border-b-2 border-b-stone-900 pt-2 z-9  ${buttonTheme}`}
            />
          )}
        </div>
        <div className="w-full absolute px-2 z-[99]">
          <InputError error={error} inputId={id} />
        </div>
      </div>
    </section>
  );
};

export default TextInput;